如何使用打字稿将 svg 图像显示到 img 标签的 onerror 属性？

Question

我有一个显示jpg的图像，但是当出现错误时，它应该显示一个svg图像。但是，Typescript 声明错误属性只接受字符串。有没有办法使用 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。

Answer 1

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