How to display images of public folder from main.js?-CodePudding

This is first attempt using Vite

I have images folder under public directory. I am trying to display them in browser. This is the code I have tried so far.

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

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

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

Can anybody please help me ? Thanks.

CodePudding user response：

Replace this line:

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

with this:

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

See vite's document for more info.