MUI React项目加载本地路径图片无报错但不显示问题求助

问题原因 #

你遇到的问题是React构建工具的静态资源处理逻辑导致的：

• 你在itemData.js里直接填写的../assets/photos/photoportrait.jpeg是项目文件系统的相对路径，不是项目构建后浏览器可访问的URL路径。
• 网络图片链接本身是完整可访问的公开URL，不需要构建工具额外处理，所以可以正常渲染。
• 你确认的路径正确只是文件系统层面的正确，构建完成后资源目录结构会发生变化，原相对路径无法对应到打包后的资源位置。

解决方案 #

方案1：通过import引入图片资源（推荐） #

构建工具会自动处理import引入的静态资源，打包后返回正确的访问路径，修改itemData.js代码如下：

// 先引入本地图片
import photoportrait from "../assets/photos/photoportrait.jpeg";

const itemData = [
    {
      img: photoportrait,
      title: 'Breakfast',
    },
]
export default itemData;

方案2：将图片放到public目录下 #

如果不想用import引入，可以把所有要用到的图片放到项目根目录的public文件夹下，比如新建public/assets/photos/目录存放图片，之后itemData.js直接写根路径即可：

const itemData = [
    {
      // 路径以/开头，对应public目录的根路径
      img: "/assets/photos/photoportrait.jpeg",
      title: 'Breakfast',
    },
]

如果项目部署在域名子路径下，需要在路径前拼接对应的子路径前缀。

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