skip to Main Content

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.

This is it.
enter image description here

2

Answers


  1. 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"/>

    Login or Signup to reply.
  2. Add images dynamically like this:

    <img src={require(../assets/television.jpg)} />
    

    Please make sure the path to your image is correct
    Here to learn how to set local images paths

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search