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

Question

我已经使用收集组件文件与文件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' 

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

Answer 1

如果您使用的是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} /> 

我希望我帮你