我是ReactJS的新手,我想在一个组件中导入图像。这些图像在公用文件夹内,我不知道如何从react组件访问文件夹。
有什么想法吗?
EDIT
我想在Bottom.js或Header.js中导入一个图像
结构文件夹为:
我不使用webpack。我应该吗?
编辑2
我想使用webpack来加载图像和其他资产。所以在我的配置文件夹中,我有下面的文件:
我需要在哪里添加图像的路径,如何添加?
谢谢
我是ReactJS的新手,我想在一个组件中导入图像。这些图像在公用文件夹内,我不知道如何从react组件访问文件夹。
有什么想法吗?
EDIT
我想在Bottom.js或Header.js中导入一个图像
结构文件夹为:
我不使用webpack。我应该吗?
编辑2
我想使用webpack来加载图像和其他资产。所以在我的配置文件夹中,我有下面的文件:
我需要在哪里添加图像的路径,如何添加?
谢谢
当前回答
简单地使用
<img src='/image.extension' />
React会自动指向公共目录
其他回答
在public ex.Assets中创建一个文件夹,把你的图像放在这个文件夹中,并在src中指定folder_name / image_name
<img src = "/Assets/cardimg.svg" alt="Card image cap" width="400" />
一个简单的解决方案是使用这样的路径:/images/logoFooter.png。如果文件直接位于公用文件夹下,执行/someImage.png。你可以深入/x/y/z/image.png。将图像的定位部分视为该图像的绝对位置。
欲了解更多信息,请访问https://create-react-app.dev/docs/using-the-public-folder/。
这里有三个简单的方法可以做到这一点。
你可以在目录中创建一个文件夹,然后像我们导入的方式一样访问它 你可以在SRC中直接给出图像名称 <img src="image__name" alt="yourpic" />
//默认情况下,公共文件夹中的react look可以在img标签中渲染图像
Const image = window.location.origin + "/image.png";
//如果你的图片在公共目录的imagecollection文件夹里面,你可以用这种方式导入它
const image = window.location.origin + "/imagecollection /image.png";
<img src={image} alt="yourpic" />
试试这个简单易行的方法
不要在src中创建Image文件夹。 在公共场所制作一个图像文件夹。 你工作在反应引导安装
NPM安装反应引导 import React from 导入“引导/ dist / css / bootstrap.min.css”; import {Image} from 'react-bootstrap'; 导出默认函数Main() { 回报( <> <Image src="/img/ Image .jpg/100px250" alt="bg Image " fluid /> . </> ) }
希望它已经完成了
你也可以用这个…它的工作假设'yourimage.jpg'是在你的公共文件夹。
<img src={'./yourimage.jpg'}/>