Question 245674 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Image doesn't load in react js

I have developing an app using spring boot and react js as frontend and backend respectively.

I have a database that consists of "title, image, content" and when I fetch without the frontend, everything works perfectly – I see all the details including the picture that is saved as path.

But the image doesn’t display in react…

This is my image tag in react js

<img src ={'data:image/jpg;base64,${article.file}'}/>

I was expecting everything to display but it’s only the title and content that are displaying.

Tags:

2

Answers


  1. 0

    In the code you provided, you are trying to create an element with a src attribute containing a template literal. However, you have a syntax issue in your template literal. You should use backticks (`) to create a template literal string and ${} to interpolate the value of article.file correctly.

    Below is the corrected version.

    <img src={`data:image/jpg;base64,${article.file}`} alt="Article Image" />

    Login or Signup to reply.
  2. 0

    The issue could be with how you are using template literals in your ‘img’ tag.

    The string interpolation syntax with ${…} requires backticks instead of single or double quotes.

    Try changing your code to use backticks:

    <img src={`data:image/jpg;base64,${article.file}`} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search