typescript - 图像未在 Ionic React 中显示

Question

我想显示一个 .svg 图像，它位于我src目录的 assets 目录中。

这是文件夹结构的一瞥 -

我想balloons.svg从Register.tsx. 我正在使用该IonImg元素并尝试过像../assets/balloons.svg源这样的目录，但它们似乎不起作用。

注意：如果我使用图像 URL 作为源，图像会正确显示。

Answer 1

需要将 svg 导入 Register.tsx 文件中：

import Balloons from '../assets/balloons.svg';

然后将 src 属性设置为导入：

<IonImg src={Balloons} />

Answer 2

您在 Ion React App 中的 src 将类似于此代码来加载 img ..

<IonImg src="/assets/imgs/image.JPG"></IonImg>

没有 src 点../喜欢

<IonImg src="**../**public/assest/imgs/image.JPG"></IonImg>

Answer 3

我建议在 Ionic react 中使用“require”定位。

所以试试：

require("../assets/balloons.svg")

喜欢：

<IonImg src={require("../assets/balloons.svg")} />