javascript 如何在react中使用parcel添加图片？

1cosmwyk 于 2023-05-05 发布在 Java

关注(0)|答案(3)|浏览(141)

我一直在尝试在react中添加图像。我不是用webpack，而是用parceljs。使用typescript，我尝试：
import image from path/to/image.png<img src={image} />
内部React组分：
尝试：<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>
);

JavaScript

来源：https://stackoverflow.com/questions/52841765/how-to-add-image-in-react-by-using-parcel

3条答案

按热度按时间

1yjd4xko1#

你需要这样做

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

然后在react JSX中执行以下代码：

<img src={image} />

赞(0）回复(0）举报 2023-05-05

dgtucam12#

<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';，写得像什么都没有。在引号中输入路径。然后在你的reactJSX代码中写你的img标签，如下所示：

<img src={somePhoto} />

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

赞(0）回复(0）举报 2023-05-05

ddhy6vgd3#

use static image with parcel problem solved......

我也有同样的问题，但你可以使用parcel-plugin-static-files-copy包来修复它：parcel-plugin-static-files-copy。然后使用以下命令安装npm i parcel-plugin-static-files-copy，然后将其添加到.parcelrc插件中
{“extends”：“@parcel/config-default”，“resolvers”：["@parcel/resolver-glob”，“..."] }启用后，您可以使用./files/. png等说明符导入多个文件。这将返回一个对象，该对象具有与文件名对应的键。
import * as images from './img/types/.svg';
use--- i have images folder inside static（root）folder
我有16个图像在这个图像文件夹现在我可以用它们的名字

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 如何在react中使用parcel添加图片？

3条答案

相关问题

热门标签

最新问答