我之前在React中导入的图像如下所示：
import person from '../images/image1.png'
然后像这样使用它们：
<img src={person} alt="" />
现在我想在src本身中指定路径，原因如下：
src
<img src="../images/image1.png" alt="" />
但它不工作，即使它应该。
8hhllhi21#
有两种方法可以使用Create React App在JSX中添加图像。第一种方法是像您一样使用import，导入src文件夹中某个位置的图像，如下所示：
import
第二种方法是将图像的路径赋予<img>的src属性，但它始终相对于public文件夹，其方式是路径应该以/开头，而/表示public文件夹。请参见创建React应用程序文档中的Adding Images, Fonts, and Files和Using the Public Folder。对于您的第二次尝试工作，你可以把images文件夹内public文件夹，并得到你的图像如下：
<img>
public
/
images
<img src="/images/image1.png" alt="" />
如果您的React应用在部署时将位于子文件夹中，则对于第二种工作方式，您应在package.json中添加此"homepage":"www.example.com/folder"，并按如下所示使用process.env.PUBLIC_URL。
package.json
"homepage":"www.example.com/folder"
process.env.PUBLIC_URL
<img src={process.env.PUBLIC_URL + "/images/image1.png"} alt="" />
1条答案
按热度按时间8hhllhi21#
有两种方法可以使用Create React App在JSX中添加图像。第一种方法是像您一样使用
import，导入src文件夹中某个位置的图像，如下所示：第二种方法是将图像的路径赋予
<img>的src属性，但它始终相对于public文件夹，其方式是路径应该以/开头，而/表示public文件夹。请参见创建React应用程序文档中的Adding Images, Fonts, and Files和Using the Public Folder。
对于您的第二次尝试工作，你可以把
images文件夹内public文件夹，并得到你的图像如下：如果您的React应用在部署时将位于子文件夹中，则对于第二种工作方式，您应在
package.json中添加此"homepage":"www.example.com/folder"，并按如下所示使用process.env.PUBLIC_URL。