React项目部署至Netlify后图片无法显示的问题求助

你的图片路径写法完全错误，这就是本地能显示但部署后消失的核心原因。

为什么原写法不行？ #

本地开发时，React的开发服务器能访问src目录下的文件，但项目打包部署后，src目录会被编译处理，原有的相对路径src/images/leo-self.jpg在生产环境中根本不存在，自然找不到图片。

两种正确的资源引用方式 #

1. 图片放在public文件夹下 #

public是React项目的静态资源根目录，打包后里面的文件会直接放到项目根目录。此时路径要从根目录开始写：

<Card.Img variant="top" src="/images/leo-self.jpg" className="image"/>

注意：如果你的图片在public/images下，就用/images/xxx.jpg，不需要加public前缀。

2. 图片放在src文件夹下（比如src/images） #

这种情况需要让webpack处理图片资源，通过import或require引入：

• 用import引入：

import leoSelfImg from './images/leo-self.jpg';

// 组件中使用
<Card.Img variant="top" src={leoSelfImg} className="image"/>

• 用require动态引入：

<Card.Img variant="top" src={require('./images/leo-self.jpg')} className="image"/>

关于你尝试的文件夹问题 #

之前换文件夹没用，是因为你没改路径写法：

• 放public/assets时，路径应该是/assets/leo-self.jpg，而不是src/assets/xxx
• 放src/images时，不能直接写字符串路径，必须用import/require让webpack处理

关于路径放JSON文件的说法 #

这属于进阶的动态路径管理，对你当前的问题完全没必要，先把基础的资源引用方式改对就能解决问题。

内容的提问来源于stack exchange，提问作者Naeem Malik