用資產文件 Javascript 中的圖像替換 alt 文本

Question

這是我的文件夾結構

-- assets
      |
   - missing.jpg

這是我用來渲染電影 div 的 function

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);
  });
}

我正在嘗試更改此 function 中的替代圖像以在我的資產文件夾中顯示圖像，而不僅僅是文本標題。

Answer 1

如果我理解正確，您想在找不到圖像時添加圖像嗎？

好的，所以有多種方法可以解決這個問題，首先，如果您的路徑無效，請使用三元運算符正確 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");

這樣，如果第一個源由於某種原因失敗，則默認圖像將啟動。確保您的默認圖像至少是最后一個，否則它將位於頂部。