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

Posted 2023-02-23

【中文标题】如何使用包裹在反应中添加图像？

【英文标题】：How to add image in react by using parcel?

【发布时间】：2019-03-21 08:36:49

【问题描述】：

我一直在尝试在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>
);

【问题讨论】：

Parcel 支持使用import 语法导入资产文件。但路径必须是字符串。 import image from 'path/to/image.png'

【参考方案1】：

你需要这样做

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

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

<img src=image />

【讨论】：

包裹 2 使用 import image from 'url:path/to/image.png'; 。来源：v2.parceljs.org/recipes/image

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