如何在main.js中显示public文件夹中的图片？

Vite 里的 public 目录是静态资源的根目录，访问该目录下的文件不需要带 public 前缀，也不用写相对路径，直接用**根路径（以 / 开头）**即可。你当前的路径写法不符合Vite的资源解析规则，所以图片加载失败。

修改后的代码如下：

import data from '../../data.json' assert { type: 'JSON' };

if (data.length > 0) {
    data.forEach (item => {
        console.log(item);

        const markup = `<div class="col-sm-10">
                    <div class="col-sm-3">
                        <img src="/images/${item.bannerImage}" alt="Image">
                    </div>
                </div>`;
        
        document.querySelector('.row').insertAdjacentHTML('beforeend', markup);
    });
}

补充说明 #

• Vite 会将 public 目录下的文件原封不动打包到输出目录的根位置，因此 public/images/xxx.png 最终的访问路径就是 /images/xxx.png
• 若使用相对路径（比如你写的 ../../public/images/），会因JS文件的实际打包路径与你预期的相对关系不匹配，导致资源解析错误

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