Search code examples
javascriptreactjsecmascript-6create-react-app

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]" ...


Solution

  • 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
    }];