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 ;-;
Solution
First of all you can’t import files from the internet to the project like import image from 'https://konachan.net/images/konachan_net_sm_std.png'.
Second of all, I suppose the topbar.jsx is inside the src directory somewhere. You need to provide the path to the image file relative to topbar.jsx in import image from './src/images/konochan.png'.
Alternatives
-
If you do want to link the image from the internet like ‘https://konachan.net/images/konachan_net_sm_std.png’, Then specify the link to it in the src attribute of the img tag itself just like usual html.
-
You could also create a folder named ‘public’ in the root directory of your project (usually where the src folder is located) and save the image there, Then you can directory link the image’s path from the public directory (eg: If your image is saved in public/images/konachan.png, then you can set the src of the img like so
src="/images/konachan.png". Everything in the public folder is public so you can access the image likehttp://localhost:5173/images/konachan.png.
@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.