将资产文件Javascript中的alt文本替换为图像

Question

这是我的文件夹结构

-- assets
|
- missing.jpg

这是我用来渲染电影div 的函数

function showMovies(movies) {
main.innerHTML = "";
movies.forEach((movie) => {
const { title, poster_path, vote_average, overview } = movie;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_PATH + poster_path}"
alt="${title}"
/>
<div class="movie-info">
<h3>${title}</h3>
<span class="${getClassByRate(vote_average)}">${vote_average}</span>
</div>
<div class="overview">
<h3>Overview</h3>
${overview}
</div>
`;
main.appendChild(movieEl);
});
}

我正在尝试更改此函数中的alt图像，以便在我的资产文件夹中显示图像，而不仅仅是文本标题。

Answer 1

如果我理解正确，您想在找不到图像的情况下添加图像，对吗？

好的，有多种方法可以解决这个问题，首先，如果你有一个无效的路径，请使用terniary运算符正确地src你的图像

src=`${IMG_PATH ? IMG_PATH + poster_path : '/assets/missing.jpg'}`

但是。。。如果由于服务器不可用或出现400/500错误而导致图像加载失败，那就另当别论了，我个人的方法是用图像的大小制作一个div，并使用css属性设置多个背景，例如。。。。

background: url("/path_to_movie_poster.gif"), url("/assets/missing.jpg");

这样，如果第一个源由于某种原因失败，则默认图像将启动。确保你的默认图像是最后一个，否则它会在顶部。