使用index.js在React中导入多个图像资源

我一直在使用一种收集组件文件以供导出的模式index.js文件放置在目录中，例如：

// index.js file in /components directory
export { Splash } from './Splash'
export { Portfolio } from './Porfolio'
export { Contact } from './Contact'

In 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'

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

To 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'