图像标签 - 如何在 url 失败的情况下放置一个 ICON（不是字符串 - 不是 URL）？

Posted 2023-02-18

【中文标题】图像标签 - 如何在 url 失败的情况下放置一个 ICON（不是字符串 - 不是 URL）？

【英文标题】：image tag - how to put on an ICON (not string - NOT URL) in case of url failure?

【发布时间】：2022-01-21 10:43:44

【问题描述】：

我使用 React.js 作为前端框架，

我有一个来自 antd 的图标，我想把它放在图像标签的 'alt' 属性中， 因此，如果我传递的 url 将为 null - 它会将图标放在那里。

我尝试使用 'alt' 但它只接受字符串。 可以放一个图标吗？ （比如 antd 的？）

强调-我想将其添加为- <Image alt=<StepBackwardOutlined />

在实际图标中，而不是作为 URL。

【问题讨论】：

您是否使用其他库作为 js、Jquery、angular 等？请添加您的代码以及到目前为止您尝试过的内容

@לבנימלכה 已更新 :)

这能回答你的问题吗？ react.js Replace img src onerror

不，那是如何添加 url（字符串）作为替代方法，我正在寻找一种添加图标的方法 - 正如我在问题描述中所写的那样

【参考方案1】：

使用onerror 属性。

来自文档：

<img src="imagefound.gif" onerror="this.onerror=null;this.src='logoIcon.jpg';" />

这里logoIcon.jpg是图标路径。

【讨论】：

那是一个网址，不是一个图标..

【参考方案2】：

您可以在 onError 上使用。 在 onError 中，您可以在 ex 的主要返回之外创建一个函数：-

const onErrorImage = ((e) => 
  e.target.src = <StepBackwardOutlined />
)

<img onError=onErrorImage />

我从未尝试过使用组件...我从未见过有人使用它...所以我不确定它是否会起作用。

【讨论】：

谢谢，但它不起作用 - 让浏览器陷入 api 请求的无限循环，我猜是因为 'src' 需要链接而不是图标

@TzachiElrom 好吧，我尝试了另一种方法......这不是处理这个问题的好方法......但它正在工作......这是它的链接：- link ......如果你发现它有效，你可以在你的项目中使用它......我再次提到它不是最好的方法。

这是一个有趣的解决方法！谢谢！ （虽然我确实希望我不必使用它）