React应用如何从数据库获取图片名并正确加载public目录下的图片

你之前的写法不生效，核心原因是%PUBLIC_URL%是Create React App在构建public/index.html文件时做静态替换的占位符，在JSX/JS运行时代码里这个占位符不会被自动解析替换，所以动态拼接数据库返回的文件名时，直接用这个占位符拿不到正确路径。

根据你的项目结构，有两种可落地的写法：

方案1：根路径直接引用（适配部署在域名根目录的场景，最简便） #

public目录下的资源在构建完成后，会被直接映射到站点根路径，直接写根路径开头的地址即可：

<img src={`/images/${portraitFile}`} alt="" />

方案2：读取环境变量适配子路径部署场景 #

如果你的项目不是部署在域名根路径，而是部署在某个子目录下，可以用CRA注入的全局环境变量读取public路径，运行时拼接即可：

<img src={`${process.env.PUBLIC_URL}/images/${portraitFile}`} alt="" />

如果写完还是无法正常加载，按以下顺序核对：

• 确认数据库返回的portraitFile字段值包含完整文件后缀，比如返回值是portrait.jpg而不是不带后缀的portrait
• 确认public/images文件夹名、图片文件名的大小写完全匹配，Linux生产环境对文件名大小写敏感，大小写不一致会直接返回404
• 打开浏览器开发者工具的Network面板，查看图片请求的实际路径，和服务器上部署的静态资源路径做比对，快速定位路径拼接错误

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