[英]Exporting images and font-awesome icons from seperate js file
I've read a lot of solutions on how to store images in an array of objects.我已经阅读了很多关于如何将图像存储在对象数组中的解决方案。 I did every solution and none of them worked for me.
我做了每一个解决方案,但没有一个对我有用。 Maybe I'm missing a cast?
也许我错过了一个演员?
Images are stored in src
folder.图像存储在
src
文件夹中。
I've tried to export default
, but unfortunately it did not solve the problem.我尝试
export default
,但不幸的是它没有解决问题。
Exporting part(MenuList.js):导出部分(MenuList.js):
import burgerImg from '../images/menu-images/burger-menu2.png'
import pizzaImg from '../images/menu-images/pizza-menu1.png'
import kebabImg from '../images/menu-images/kebab-menu1.png'
import {FaHamburger} from 'react-icons/fa'
import {FaPizzaSlice} from 'react-icons/fa'
import {GiMeal} from 'react-icons/gi'
export const MenuList = [
{
id: 1,
name: 'Burgers',
img: burgerImg,
icon: FaHamburger
},
{
id: 2,
name: 'Pizzas',
img: pizzaImg,
iconImg: FaPizzaSlice
},
{
id: 3,
name: 'Kebabs',
img: kebabImg,
icon: GiMeal
}
]
Importing part(Menu.js):导入部分(Menu.js):
import {MenuList} from './MenuList'
state = {
menu: MenuList
}
{this.state.menu.map(item => {
return <MenuItem key={item.id} itemInfo={item}/>
})}
MenuItem.js:菜单项.js:
export default function MenuItem({itemInfo}) {
return (
<div>
{itemInfo.name}
{itemInfo.img}
{itemInfo.icon}
</div>
)
}
And then I'm trying to load everything from single component like that:然后我试图从这样的单个组件中加载所有内容:
export default function HomeMenu() {
return (
<div>
<h1>Menu</h1>
<Menu></Menu>
</div>
)
}
I'm mapping through every element of my list and passing the elements to another component, but the problem is that my images and font-awesome icons aren't loading.我正在映射列表中的每个元素并将元素传递给另一个组件,但问题是我的图像和字体真棒图标没有加载。
When I run the project or refresh it, I get the following result:当我运行项目或刷新它时,我得到以下结果:
Burgers/static/media/burger-menu2.d3dca9de.png
The console outputs this:控制台输出这个:
index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
Dev tools panel elements section of images shows this:图像的开发工具面板元素部分显示了这一点:
Folder structure:文件夹结构:
Am I missing a cast about something?我错过了关于某事的演员表吗? I viewed a lot of stack about importing/exporting images, but none of the solutions worked for me.
我查看了很多关于导入/导出图像的堆栈,但没有一个解决方案对我有用。
Modify your MenuItem.js
as,将您的
MenuItem.js
修改为,
export default function MenuItem({itemInfo}) {
return (
<div>
{itemInfo.name}
<img src={itemInfo.img} alt='' />
{itemInfo.icon}
</div>
)
}
To fix icon issue, pass the component as jsx
in the object.要修复图标问题,请在
jsx
中将组件作为 jsx 传递。 Modify as:修改为:
export const MenuList = [
{
id: 1,
name: 'Burgers',
img: burgerImg,
icon: <FaHamburger /> //jsx
},
...
jsx
is just javascript with some syntactical sugar. jsx
只是带有一些语法糖的 javascript。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.