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

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>
);

Answer 1

你需要这样做

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

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

<img src={image} />

Answer 2

<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 个项目中，我们使用另一台服务器来加载图像。但具体申请图片应该如上。

How to add image in react by using parcel?