So very simply I want to put an image in my page. Previously I put a background image on it, it is working well.
I don’t get any error just a little picture icon on the screen.
I use React.js
I keep the pictures in src/assets folder
The images in jpg format I try to change it in png this does not helped. I think I just not notice something simple. I tried to add the image with simple html method, and with react component method as well. I write a code example below.
App.js
import React from 'react';
import './App.css';
import Television from './components/television/Television'
export default function App() {
const title = 'xy';
return (
<div className="App">
<h1>Welcome on {title}</h1>
<div className='television'>
<img src='assets/television.jpg'/>
</div>
<Television/>
</div>
);
}
Television.js
import React from "react";
function Television() {
return (
<div>
<img src="assets/television.jpg"/>
</div>
)
}
export default Television;
I know this two way the same I just tried it. I attach a screen about the little picture images on the screen.
2
Answers
I think that image path is incorrect.
Your component position is "components/television/Television" so that means deeps is two from app component and assets folder deep is zero.
so image path became like this :
<img src="../../assets/television.jpg"/>
Add images dynamically like this:
Please make sure the path to your image is correct
Here to learn how to set local images paths