如何使用 Typescript 将 svg 图像显示到 img 标签的 onerror 属性？答案

【问题标题】：How to display an svg image to img tag's onerror property with Typescript?如何使用 Typescript 将 svg 图像显示到 img 标签的 onerror 属性？
【发布时间】：2020-04-29 16:15:57
【问题描述】：

我有一个显示 jpg 的图像，但是当出现错误时，它应该显示一个 svg 图像。但是，Typescript 声称 onerror 属性只接受字符串。有没有办法使用 onerror img 属性来显示 svg 或组件？

这是我的代码：

 <img
      width="100px"
      height="100px"
      src="myimg.jpg"
      onError={(e) => {(e.target as HTMLImageElement).src ="error.jpg"}}
    />

// And with the svg:

 <img
      width="100px"
      height="100px"
      src="myimg.jpg"
      onError={(e) => {(e.target as HTMLImageElement).src =<Icon src="error"/>}}
    />

我正在使用 React + Typescript。

【问题讨论】：

你能分享一些你正在使用的代码吗？
是的，我打字太快了，现在已经更正了。

标签： javascript html css reactjs typescript

【解决方案1】：

您可以将 svg 导入为import svgImage from '../../mysvg.svg'，这相当于src 的img 标签。您还可以使用 import {ReactComponent as SvgImage} from '../../mysvg.svg' 导入与反应组件相同的 svg，它可以安装为 <SvgImage/>。对于您的用例，您可能希望使用第一种方法导入。

【讨论】：