如何在React中有条件地渲染图像？

Question

想象一下我想创建一个组件来渲染图像。如果图像资源有效，则应通过css background-image将其渲染为div。否则，我应该将其渲染为带有alt标签的标准<img>。

所以我们得到这样的东西：

const ImageComponent = ({src}) => {
  const [loaded, setLoaded] = useState(false);
  const [renderFallback, setRenderFallback] = useState();

  useEffect(() => {
    const image = new Image();
    image.onsuccess = () => {
      setLoaded(true);
      setRenderFallback(false);
    }
    image.onerror = () => {
      setLoaded(true);
      setRenderFallback(true);
    }
    image.src = src;

    return () => {
      // clean up listeners
      image.onsuccess = undefined;
      image.onerror = undefined;
    }
  }, [src]);

  if (!loaded) { return null; }

  return renderFallback ?
    <div style={{backgroundImage: `url(${src})`}}/> :
    <img src={src} alt="my alt"/>;
}

[这里，我们首先通过普通的javascript（在useEffect中）开始对图像进行抓取。如果有效，则将资源（由浏览器）缓存，并且随后的<div>的呈现是瞬时的。

但是，如果资源无效，则没有缓存机制（有关更多详细信息，请参见this question）。因此，当我们在Component的末尾渲染新的<img>元素时，它会启动一个全新的请求以获取该图像（尽管推断出该图像已损坏）。

因此，为了避免重复获取数据，可能的解决方案是呈现已初始化的image元素，而不是呈现该图像的新的react元素。

这可能吗？

---

评论反馈

• 无效图像是返回状态404或指向不是实际图像（例如https://goodreads.com）]的资源的图像
• 我想在浏览器默认的“损坏的图像”损坏的情况下显示它。这无法通过background-image CSS完成，因此我需要依赖于标准的<img>元素。因为我已经确定图像已损坏（在useEffect中），所以我想在React中渲染已损坏的<img>时避免进行新的获取。

希望澄清的事情！

想象一下我想创建一个组件来渲染图像。如果图像资源有效，则应通过css background-image将其渲染为div。否则，我应该将其渲染为标准

Answer 1

我对有效的定义是：图像已加载，并且宽度和高度均大于零。