javascript - 如何使用包裹在反应中添加图像？

Question

我一直在尝试在react. 我没用webpack，我在用parceljs。也使用typescript我尝试过：

import image from path/to/image.png <img src={image} />

内部反应组件：

尝试：<img src="path/to/image.png" />

尝试：<img src={"path/to/image.png"} />

不过，还是不行。

代码看起来像这样：

import * as React from 'react';

const componentName = () => (
  <div>
     <img src="path/to/image.png" />
  </div>
);

score 22 · Accepted Answer

你需要这样做

import image from 'path/to/image.png';

然后在您的反应JSX中遵循以下代码：

<img src={image} />

score 4 · Accepted Answer

<img src="path/to/image.png"/>和之间没有什么不同<img src={"path/to/image.png"}/>，你应该import你的图像，然后像一个JavaScript对象一样使用它，见下文：

import somePhoto from 'path/to/image.png';

你不注意'path/to/image.png';，写它就像什么都没有。在引号中输入您的路径。然后在您的react JSX代码中编写您的img标签，如下所示：

<img src={somePhoto} />

还有更多不同的方法。在其他react项目中，我们使用另一台服务器来加载图像。但应用程序的具体图像应如上。

2 回答 2