代码之家 › 专栏 › 技术社区 › sdvnksv

从React中的另一个文件导入图像

create-react-app ecmascript-6 reactjs javascript

sdvnksv · 技术社区 · 6 年前

我正在使用 create-react-app

索引.js:

import lostImage from './assets/img/illustrations/lost.svg';

function Image(props) {
    return (
        <img src={lostImage} />
    );
}

它按预期工作,但是我计划导入几十个图像,所以我决定移动 import 在同一目录中的单独文件中调用:

图片.js:

import lostImage from './assets/img/illustrations/lost.svg';

import './images.js';

function Image(props) {
    return (
        <img src={lostImage} />
    );
}

但是我得到了 lostImage not defined 错误。我该怎么做?

1 回复 | 直到 6 年前

Arup Rakshit 6 年前

您需要从images.js文件导出它们。然后将它们导入index.js文件以供使用。

import lostImage from './assets/img/illustrations/lost.svg';
export { lostImage };

索引.js:

import {lostImage} from './images.js';

function Image(props) {
    return (
        <img src={lostImage} />
    );
}

推荐文章

IsraelCena · 如何从react图标导入材质设计中的所有图标

2 年前

njho · 大型Create React应用程序包大小-优化的生产构建

6 年前

Nugzar Gaguliya · 如何在不弹出的情况下将less集成到Create React应用程序中

6 年前

Sangram Badi · 引导程序在React中行为不正确

6 年前

abu abu · 在react中的“npm start”命令中发出。js公司

6 年前

Rafael Rocha · 如何“隐藏”ommit巴别塔/网页包/插件配置文件?

6 年前

Anna · 添加第三方js库以创建React应用程序

6 年前

marquesm91 · 创建在智能电视浏览器上运行的react应用程序

6 年前

Sabbiu Shah · 如何动态加载减速器

6 年前

Miha Å uÅ¡terÅ¡iÄ · Mobx4-声明存储中的可观察项引发sintax错误

6 年前