在数组中使用本地图片URL是否可行？图片路径正确却不显示原因

我制作项目列表时，通过数组.map()生成HTML结构，再用.insertAdjacentHTML()插入页面。检查元素时图片路径显示正常，但图片就是不显示，请问原因是什么？

代码示例 #

项目数据数组 #

const projectData = [
    {
        id: 01,
        title: "Project 1",
        url: "https://react-projects-1/",
        imageUrl: "src/img/projects/project-1.png", //is it wrong using like this
        description: "This is project 1 desc",
    },
    {
        id: 02,
        title: "Project 2",
        url: "https://react-projects-2/",
        imageUrl: "src/img/projects/project-2.png", //is it wrong using like this
        description: "This is project 2 desc",
    },
];

映射生成HTML的代码 #

const projectHTML = projectData.map((el) => {
    return `<div class="row align-items-center project_row">
                <div class="col-md-5 col-12 order-md-2">
                    <a href="${el.url}" class="thumb">
                        <img
                            src="${el.imageUrl}"
                            class="w-100"
                            alt="${el.title}"
                            target="_blank"
                        />
                    </a>
                </div>
                <div class="col-md-7 col-12 order-md-1 mt-4 mt-md-0">
                    <h3><span>${el.id}.</span>${el.title}</h3>
                    <p>
                        ${el.description}
                    </p>
                    <ul class="buildTech">
                        <li><i class="fa-brands fa-react"></i> React</li>
                    </ul>
                    <a href="${el.url}" class="btn" target="_blank">View</a>
                </div>
            </div>`;
});

workWrapper.insertAdjacentHTML("afterbegin", projectHTML);

可能的原因及解决办法 #

1. 相对路径的基准错误 #

浏览器解析图片路径时，是相对于当前HTML文件的位置，而不是相对于你的JS文件位置。如果你的JS文件放在子目录（比如src/js/），那src/img/...会被解析成src/js/src/img/...，自然找不到图片。

解决办法：

• 调整路径为相对于HTML文件的路径：比如HTML在项目根目录，图片在src/img/projects/，路径保持src/img/projects/project-1.png即可；如果HTML在dist/index.html，图片构建后在dist/img/projects/，则路径改为img/projects/project-1.png。
• 改用绝对路径：比如/img/projects/project-1.png，确保服务器上图片部署在根目录的img/projects文件夹下。

2. 构建工具的路径处理问题 #

如果用了Webpack、Vite这类构建工具，src目录在构建后会被打包处理，直接写src/开头的路径在生产环境会失效。

解决办法：

• Vite：把图片放在public/img/目录下，路径改为/img/projects/project-1.png。
• Webpack：配置file-loader或asset module，确保图片被复制到输出目录，路径使用构建后的相对路径。

3. 路径大小写或拼写错误 #

Linux/macOS系统区分文件名大小写，如果实际图片文件名是Project-1.png，但你代码里写的是project-1.png，会导致加载失败；另外检查路径里的文件夹名称是否拼写正确（比如project vs projects）。

解决办法：

• 核对图片文件名和路径的大小写，保持完全一致。
• 直接在浏览器地址栏输入图片的完整URL（比如http://localhost:3000/src/img/projects/project-1.png），测试是否能打开，以此验证路径是否正确。

4. 图片文件不存在或路径错误 #

虽然元素检查里路径显示正确，但要确认图片文件确实存在于指定位置，没有被移动、删除或者文件名被修改。

解决办法：

• 手动到项目目录里核对图片的位置，确保文件存在。
• 用浏览器的开发者工具“网络”面板查看图片请求的状态：如果是404，说明路径确实有误；如果是其他状态码，根据提示排查问题。

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