使用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