CODEWITHSUNDEEP
javascriptreactjsecmascript-6create-react-app
Null isTrue
Null isTrue

Reputation: 1906

React - How to import/source local images into an Object

I am using this library for a photo gallery on a create-react-app project.

Loading the images as http works fine ie: 

 const IMAGES = [{
            src: "https://c2.staticflickr.com/someimage.jpg"
            ....  
         }];

How can I source a local image file into an object, just like the above example?

ie:

const IMAGES = [{
        src: "my local path",
        thumbnail: "my local path",   
     }];

I already tried:

Gallery.js

(ps: the path is correct and the images directory does reside inside my src directory)

import logo from "../images/site/logo.jpg";
export default { logo };

App.js

All the different ways I've tried so far:

import logo from "./Gallery";
const IMAGES = [{
        src: `${logo}`, //no dice
        src: {logo}, //no dice
        src: <logo/>, //no dice
        src: "../images/site/logo.jpg" //no dice

        ....  
     }];

The html console inspector says: <img src="[object Object]" ...

Upvotes: 3

Views: 3590

Answers (2)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20080

logo is a object so you need to refer logo.logo

const IMAGES = [{
        src: `${logo.logo}`, //no dice
        src: {logo.logo}, //no dice
        ....  
     }];

Upvotes: 1

jens
jens

Reputation: 2145

It looks like you are exporting an object from Gallery.js, so try logo.logo. You could use just logo if you export default logo.

const IMAGES = [{
  src: logo.logo
}];

Upvotes: 3

Related Questions