ReactJS使用API返回变量拼接图片路径无法加载的问题

可用实现方案（均无需提前导入图片） #

方法1：使用项目公共静态目录 #

所有前端开发框架都提供了无需打包工具处理的公共资源目录，资源放在该目录下时可以直接按路径寻址，和原生HTML使用图片的逻辑完全一致：

• React/CRA项目：使用根目录下的public文件夹
• Vue/Vite项目：使用根目录下的public文件夹
• 其他框架：参考官方文档的「静态资源/公共资源」说明即可
  操作步骤：
• 把所有OpenWeather天气图标都放到public目录下的单独文件夹，比如public/openweather-icons
• 页面中直接按路径拼接即可：

<img src={`/openweather-icons/${wicon}.png`} alt="天气图标" />

方法2：静态资源服务器托管（已验证可正常使用） #

将所有天气图标上传到本地或线上的静态资源服务器，直接把wicon变量拼接到资源服务器的基础访问路径末尾即可，不需要在项目中导入任何图片资源，只要资源地址可正常访问就能加载。

异常原因说明 #

1. 动态导入不生效：前端ES Module的导入是静态编译逻辑，必须在编译阶段确定导入路径，不能使用运行时才获取到的wicon变量作为导入路径，因此该方式本身不可行。
2. 本地拼接路径找不到资源：如果图片存放在src等源码目录下，打包工具会自动给资源文件名加上哈希后缀（比如04d.2e4a9f.png），你拼接的04d.png和实际打包后的文件名不匹配，自然无法加载。

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