CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Adewale Perfect
Adewale Perfect

Reputation: 573

Imported image showing image path instead of the image - React.js

I tried importing an image but instead of displaying the image, it's displaying the path to the image instead.

The Array I'm creating, and I'm still adding more data to it is:

import importedImage from './assets/path.png';
export const membersData = {
    All: [
        { 
            id: 1,
            picture: importedImage,
            name: 'Demo name', 
            location: 'Demo location', 
            role: 'Consultant ', 
            contact: 'T: number \nE: mail' 
        },
    ],
}

How I rendered it:

{posts.length === 0 ? (
   <p>No posts...</p>
  ) : (
  posts.map((post) => (
   <div key={post.id}>
   {post.picture}
   </div>                       
)))}

result : /static/media/path.aba65f86.png

Note: The path isn't what I've actually used, it's just for demonstration purposes

Upvotes: 0

Views: 277

Answers (2)

Kishore Sampath
Kishore Sampath

Reputation: 1001

Pass the Imported Image url to the image tag's src attribute.

<img src={post.picture} alt="Could not load image" />

Upvotes: 1

Yaroslav Bigus
Yaroslav Bigus

Reputation: 678

if your bundler configured well, with import you should get a base64 image url. So you can just pass it to the img tag:

<img src={post.picture} alt=""/>

Upvotes: 1

Related Questions