React-如何将本地图像导入/来源到对象

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

Answer 1

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

Answer 2

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

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