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

Question

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

score 3 · Accepted Answer · answered Mar 01 '18 at 01:37

3

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

answered Mar 01 '18 at 01:37

jens

2,075
10
15

Thank you. Is there a more elegant way to do it? Perhaps how could I do that with destructuring? Also, I can't use `export default logo` because eventually, I'll have to `export default {img1, img2, img3...}`. Thoughts? – Null isTrue Mar 01 '18 at 01:43
There are two approaches that you can take. The first one is to export the object like that and then just use gallery.img1, gallery.img2 etc.. The second approach would be to use the WebpackCopyPlugin and instead store your static images in a directory that you copy to your dist/build dir. Then you just reference them as `/images/image1.png` etc. I guess it depends if you want webpack to follow dependencies and use file-loader or not. – jens Mar 01 '18 at 02:01

score 1 · Answer 2 · answered Oct 16 '18 at 06:32

1

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

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

answered Oct 16 '18 at 06:32

KARTHIKEYAN.A

18,210
6
124
133

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

2 Answers2