My reference to an image in reactJs + vite doesnt work

Question

I have this page called topbar.jsx:

import image from 'https://konachan.net/images/konachan_net_sm_std.png'
const topbar = () => {
    return (
        <div className="topbar">
            <div className="banner">
        <img src={image} />
        </div>
        </div>
    );
}
 
export default topbar;

I want to insert an image from a link, but when I add the topbar to app.jsx, it shows up as blank in browser.

But when I do this (the image is in the right directory): image directory

import image from './src/images/konochan.png'
const topbar = () => {
    return (
        <div className="topbar">
            <div className="banner">
        <img src={image} title='banner' alt="banner"></img>
        </div>
        </div>
    );
}
 
export default topbar;

I get an error:

the error

Please, how do I fix this? ;-;

Thank you

I don't know what to try as of right now ;-;

Answer 1

@Waakul's solution is correct, Although

Your images folder is relative to the topbar.jsx file. So just give the path like this "./images/konachan.png"

Also just check your image name. You have saved konachan.png right? not konochan.png.

It's the best method to keep images in a public folder.