在 React 中使用 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

要export默认组件做这样的：

export { default as Splash } from './Splash'
export { default as Portfolio } from './Porfolio'
export { default as Contact } from './Contact'

// you dont need to include the 'index' on the route, just do './' if you 
// are in the same directory, but your export file must be named index.js
import { Splash, Portfolio, Contact } from './';

要导出文件：图像、css、.svg 等，只需包含文件扩展名：

export { default as Img01 } from './img-01.png'
export { default as Img02 } from './img-02.jpg'
export { default as Img03 } from './img-03.svg'

//在Component.js中调用

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

Answer 2

如果您正在使用 webpack，请查看此require。您可以使用 require 导入文件，如下例所示：

树目录

-images 
  |_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} />

我希望我对你有帮助