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

The path is entirely dependent upon the backend server and how it wants to serve the image. — technicallynick, Aug 31 '20 at 18:22
Hi @Maninder, maybe this [answer](https://stackoverflow.com/questions/63661878/conditional-rendering-and-image-path-in-react-js/63662301#63662301) can help you. — Luis Paulo Pinto, Aug 31 '20 at 18:28

score 0 · Accepted Answer · answered Aug 31 '20 at 18:33

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

img tag in reactjs is not displaying on render

1 Answers1