Javascript 如何在Reactjs中有条件地呈现数据url

我试图根据文件夹中的svg文件不存在的条件有条件地呈现数据url。我有一大堆svg文件，这些文件正在输入，并通过文件名动态输入。有一些svg是不存在的，因此我需要动态渲染一个圆形图标，并使用大写文本作为图像的占位符。 我目前有：

我知道有一种方法，但我还没有弄明白这一点，网上也没有类似的解决方案。非常感谢您的帮助。谢谢

Note: In case you are wondering how I am able to render svg files by using the img="" method, its because I did some configurations and added some packages to do the job.
 

---

您只需要使用

img

元素的

onError

属性。这个想法是在调用

onError

时，将

src

道具与回退映像交换，并且在映像不存在时调用它。下面是一个示例和代码：

import { Fragment, useRef } from "react";
import "./styles.css";

const img_array = [
  "images/icon1.png",
  "images/icon2.png",
  "https://lesspestcontrol.com.au/wp-content/uploads/green-tick.png"
];

const fallback_img =
  "https://cdn.iconscout.com/icon/premium/png-256-thumb/broken-link-3-503014.png";

export default function App() {
  const swapDefaultImage = (e) => (e.target.src = fallback_img);

  return (
    <div>
      {img_array.map((src, i) => (
        <Fragment key={i}>
          <img alt={`${src}`} onError={swapDefaultImage} src={src} />
          <br />
        </Fragment>
      ))}
    </div>
  );
}

从“react”导入{Fragment，useRef}；
导入“/styles.css”；
常量img_数组=[
“images/icon1.png”，
“images/icon2.png”，
"https://lesspestcontrol.com.au/wp-content/uploads/green-tick.png"
];
常量回退\u img=
"https://cdn.iconscout.com/icon/premium/png-256-thumb/broken-link-3-503014.png";
导出默认函数App（）{
常量swapDefaultImage=（e）=>（e.target.src=fallback\u img）；
返回(
{img_array.map（（src，i）=>(


))}
);
}

---

这里有一个由3个图像组成的数组，其中2个图像不在它们应该位于的位置，因此将被后备图像替换。

您只需使用

img

元素的

onError

属性即可。这个想法是在调用

onError

时，将

src

道具与回退映像交换，并且在映像不存在时调用它。下面是一个示例和代码：

import { Fragment, useRef } from "react";
import "./styles.css";

const img_array = [
  "images/icon1.png",
  "images/icon2.png",
  "https://lesspestcontrol.com.au/wp-content/uploads/green-tick.png"
];

const fallback_img =
  "https://cdn.iconscout.com/icon/premium/png-256-thumb/broken-link-3-503014.png";

export default function App() {
  const swapDefaultImage = (e) => (e.target.src = fallback_img);

  return (
    <div>
      {img_array.map((src, i) => (
        <Fragment key={i}>
          <img alt={`${src}`} onError={swapDefaultImage} src={src} />
          <br />
        </Fragment>
      ))}
    </div>
  );
}

从“react”导入{Fragment，useRef}；
导入“/styles.css”；
常量img_数组=[
“images/icon1.png”，
“images/icon2.png”，
"https://lesspestcontrol.com.au/wp-content/uploads/green-tick.png"
];
常量回退\u img=
"https://cdn.iconscout.com/icon/premium/png-256-thumb/broken-link-3-503014.png";
导出默认函数App（）{
常量swapDefaultImage=（e）=>（e.target.src=fallback\u img）；
返回(
{img_array.map（（src，i）=>(


))}
);
}

这里有一个由3个图像组成的数组，其中2个图像不是它们应该在的位置，因此将被替换为后备图像