Как отобразить изображение SVG для свойства onerror тега img с Typescript?

Question

У меня есть изображение, которое отображает JPG, но при возникновении ошибки оно будет отображать изображение SVG. Однако Typescript утверждает, что свойство onerror принимает только строку. Есть ли способ отобразить svg или компонент вместо этого с помощью свойства onerror img?

Вот мой код:

 <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', это работает как src из img тега. Вы также можете импортировать тот же svg, что и реагирующий компонент, используя import {ReactComponent as SvgImage} from '../../mysvg.svg', который можно смонтировать как <SvgImage/>. В вашем случае вы можете импортировать, используя первый метод.