使用index.js导入多个图像资产阵营

我已经使用收集组件文件与文件index.js出口放置在目录的图案,例如:使用index.js导入多个图像资产阵营

// index.js file in /components directory 

export { Splash } from './Splash'

export { Portfolio } from './Porfolio'

export { Contact } from './Contact'

Layout.js(位于根目录下)我可以整齐地导入一个电话:

import { Splash, Portfolio, Contact } from '.' 

我使用这种模式很多,因为我在目录和子目录之间构造组件。

我的具体问题是询问是否有任何方法将此模式扩展为在src/assets/img中收集的图像资产?我可以将index.js文件放在我的图像目录中,并且可以将图像组调用到组件中吗?

//index.js in /src/assets/img directory 

export { Img01 } from './img-01.png'

export { Img02 } from './img-02.jpg'

export { Img03 } from './img-03.svg'

//Call in Component.js

import { Img01, Img02, Img03 } from '../assets/img'

我认为这应该是可以实现的,但我无法弄清楚这种模式所需的正确语法或修改。任何代码示例或更好的做法建议,赞赏。提前致谢!

回答:

如果您使用的是webpack,请查看require。您可以使用需要导入文件如下面的例子:

树形目录

-image 

|_index.js

|_notification.png

|_logo.png

-pages

|-home.js

图像/ index.js

export const notification = require('./notification.png') 

export const logo = require('./logo.png')

页/ home.js

import { notification } from '../images/' 

<img src={notification} />

我希望我帮你

以上是 使用index.js导入多个图像资产阵营 的全部内容, 来源链接: utcz.com/qa/259079.html

回到顶部