如何从 main.js 显示公用文件夹的图像？

Question

这是第一次尝试使用Vite

我在public目录下有images文件夹。 我试图在浏览器中显示它们。 这是我到目前为止尝试过的代码。

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="../../public/images/${item.bannerImage}" alt="Image">
                    </div>
                </div>`;
        
        document.querySelector('.row').insertAdjacentHTML('beforeend', markup);
    });
}

有人可以帮我吗？ 谢谢。

Answer 1

替换这一行：

<img src="../../public/images/${item.bannerImage}" alt="Image">

有了这个：

<img src="/images/${item.bannerImage}" alt="Image">

有关详细信息，请参阅vite 的文档。