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

Question

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

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

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>是即时的。

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

因此，为了避免这种重复获取，一个可能的解决方案是渲染已经初始化的image元素，而不是一个新的 react 元素来表示该图像。

这可能吗？

---

评论反馈

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

希望能澄清事情！

Answer 1

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

现在有两种方法可以检查图像是否有效：

• 假设图像无效，尝试加载图像，检查图像是否有效，然后渲染图像标签。
• 假设图像有效，渲染img标签，然后检查图像是否有效。

下面的代码首先假设该图像无效。

import React, { useEffect, useRef, useState } from "react";

const ImageComponent = ({src}) => {
    const container = useRef(null);
    const [valid, setValid] = useState(false);

    useEffect(() => {
        container.current.innerHTML = '';

        const image = new Image();

        const checkValid = () => {
            if (image.complete && image.naturalWidth > 0 && image.naturalHeight > 0) {
                setValid(true);
                container.current.appendChild(image);
            }
        }

        image.onload = checkValid;
        image.src = src;
    }, [src]);

    return (
        <div>
          <div ref={container} />
          {!valid && <div>Image not valid</div>}
        </div>
    );
};

用法：

<ImageComponent src="IMAGE_URL" />

下面的代码首先假设图像是有效的。

import React, { useRef, useState } from 'react';

const ImageComponent = ({src}) => {
    const image = useRef(null);
    const [valid, setValid] = useState(true);

    const checkValid = () => {
        if (!image.current.complete || image.current.naturalWidth < 1 || image.current.naturalHeight < 1) setValid(false);
    }

    if (valid) {
        return (
            <img
                src={src}
                onLoad={checkValid}
                onError={() => setValid(false)}
                ref={image} 
            />
        );
    }

    return <div>Image not valid</div>;
};

用法：

<ImageComponent src="IMAGE_URL" />