img tag in reactjs is not displaying on render

Question

The img tag in the following code is not showing any image. I have tried doing it in a bunch of ways like <img src="./bg.jpg" alt=""/> or writing the whole path but it's not working at all. I have also tried the backend for the image and different images bu the result is still the same.

import React from 'react';
import './VideoCard.css'
const base_url = "https://image.tmdb.org/t/p/original/";
function VideoCard({movie}) {
    return (
        <div className="videoCard">
            
            <img src="bg.jpg" alt=""/>
            <p>This is a film abt coding</p>
            <h2>Movie Title</h2>
            <p>Nuber of likes</p>
        </div>
    )
}
export default VideoCard

Answer 1

I think you need to first import your image file.

Try:

import React from 'react';
import './VideoCard.css'
import myImg from './bg.jpg';                               // <--- add this
const base_url = "https://image.tmdb.org/t/p/original/";
function VideoCard({movie}) {
    return (
        <div className="videoCard">
            
            <img src={myImg} alt=""/>               {/* <--- reference import here */}
            <p>This is a film abt coding</p>
            <h2>Movie Title</h2>
            <p>Nuber of likes</p>
        </div>
    )
}
export default VideoCard