如何從 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 的文檔。