如何使用包裹添加图像？

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