React使用useContext获取图片路径时图片破损无法渲染问题

• 浏览器解析<img>的src相对路径时，是相对于当前页面的访问URL计算的，不是相对于组件源码文件的目录位置计算的。你在Elements面板里看到的../../assets/xxx.jpg只是你写的字符串值，实际解析时会跟着当前路由变化，比如在根路径访问和在/post/detail路径下访问，这个相对路径指向的实际地址完全不一样，根本不会稳定对应到图片文件。
• 放在src/assets目录下的资源是受构建工具（Webpack/Vite）管控的，构建时会被重命名加内容hash、调整输出目录，你手动拼接字符串写的路径不会被构建工具识别，不会被替换成打包后的真实资源地址，自然加载失败。
• 你的数据里图片路径是/assets/xxx.jpg这种根路径格式，默认指向站点根目录下的assets文件夹，但你当前图片都存在src/assets里，没有被部署到根路径的assets位置，路径天然匹配不上。

二选一即可，优先推荐方案1，改动量最小，完全适配你现有代码结构。

方案1：将静态图片迁移到public目录 #

• 直接把src下的整个assets文件夹剪切到public目录下，和index.html同级。
• 删除Post.jsx里手动拼接的../..前缀，直接使用数据中存储的路径即可：

// Post.jsx中对应图片代码修改为
<img
    className="postImg"
    src={thumbnail}
    alt=""
/>

<img src={profileImg} alt="" />

• 原理：public目录下的所有文件会被原样部署到站点根路径，/assets/xxx.jpg这类根路径可以直接被浏览器访问，不需要经过构建工具处理，也不会受前端路由层级影响，路径稳定。

方案2：保留资源在src/assets目录，通过构建工具的动态导入加载 #

如果你希望图片经过构建工具压缩、hash缓存等优化，可以保留资源位置，用动态导入的方式让构建工具识别图片：

• 修改Post.jsx代码，顶部批量导入assets下的所有图片，渲染时读取构建后的真实路径：

import "./post.css";
// Vite项目用下面这行批量导入图片
const assetImgs = import.meta.glob('../../assets/*', { eager: true, import: 'default' });
// Create React App(Webpack)项目用下面这行替换上面的导入代码
// const assetImgs = require.context('../../assets', false, /\.(jpg|png|jpeg)$/).keys().reduce((prev, curr) => {
//   prev[curr.replace('./', '../../assets/')] = require(`../../assets/${curr.replace('./', '')}`);
//   return prev;
// }, {});

export default function Post({data}) {
    const {id, thumbnail, title, category, contents, profileImg, userName, created} = data;
    // 提取文件名，匹配导入的图片资源
    const thumbnailPath = `../../assets/${thumbnail.split('/').pop()}`;
    const profilePath = `../../assets/${profileImg.split('/').pop()}`;
    return (
        <div className="post">
            <img
                className="postImg"
                src={assetImgs[thumbnailPath]}
                alt=""
            />
            <div className="postInfo">
                <dl className="postCats">
                    <dt className="hidden">Category</dt>
                    <dd className="postCat">
                        {category}
                    </dd>
                </dl>
                <h3 className="postTitle">
                    {title}
                </h3>
                <dl className="authorWrap">
                    <dt className="hidden">Author</dt>
                    <dd className="author">
                        <img src={assetImgs[profilePath]} alt="" />
                        {userName}
                    </dd>
                    <dt className="hidden">post date</dt>
                    <dd className="postDate">
                        {created}
                    </dd>
                </dl>
                <p className="postDesc">
                    {contents[0].text}
                </p>
            </div>
        </div>
    );
}

• 注意这个方案需要保证data.json里存储的图片文件名和src/assets下的实际文件名完全一致，不能有拼写错误。

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