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

Question

假设我想创建一个组件来渲染图像。如果图像资源有效，我应该通过 css background-image 将其渲染到 div 中。否则我应该将其渲染为标准 <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>是瞬时的。

但是，如果资源无效，则说明没有缓存机制(有关更多详细信息，请参阅 this question)。所以当我们渲染新的 <img> 时元素位于组件末尾，它会启动一个全新的请求来获取该图像(尽管推断它已经损坏)。

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

这可能吗？

<小时/>

评论反馈

• 无效图像是指返回状态 404 的图像，或者指向实际上不是图像的资源(例如 https://goodreads.com )
• 我想在浏览器损坏的情况下显示默认的“损坏图像”。这不能通过background-image来完成css，所以我需要依赖一个标准<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" />