React - 如何 import/source 将本地图像转换为对象

Question

我在 create-react-app 项目的照片库中使用 this 库。

以 http 方式加载图像工作正常即：

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

如何将本地图像文件源到对象中，就像上面的例子一样？

即：

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

我已经试过了：

Gallery.js

（ps：路径正确，图像目录确实位于我的 src 目录中）

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

App.js

到目前为止我尝试过的所有不同方式：

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

        ....  
     }];

html 控制台检查器说：<img src="[object Object]" ...

Answer 1

您似乎正在从 Gallery.js 中导出对象，因此请尝试 logo.logo。如果你 export default logo.

，你可以只使用 logo

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

Answer 2

logo是对象所以需要参考logo.logo

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

React - 如何 import/source 将本地图像转换为对象

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

javascript

ecmascript-6

reactjs

create-react-app