Экспорт изображений и иконок с отличным шрифтом из отдельного файла js - PullRequest
Новая
       23

Экспорт изображений и иконок с отличным шрифтом из отдельного файла js

0 голосов
/ 12 июля 2020

Я читал много решений о том, как хранить изображения в массиве объектов. Я сделал все решения, и ни одно из них не помогло мне. Может быть, мне не хватает слепка?

Изображения хранятся в папке src.

Я пытался export default, но, к сожалению, это не решило проблему.

Часть экспорта (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
    }
]

Часть импорта (Menu. js): 

import {MenuList} from './MenuList'

 state = {
    menu: MenuList
}
   {this.state.menu.map(item => {
               return <MenuItem key={item.id} itemInfo={item}/>
   })}

MenuItem. js: 

export default function MenuItem({itemInfo}) {
return (
    <div>
        {itemInfo.name}
        {itemInfo.img}
        {itemInfo.icon}
    </div>
)
}

И затем я пытаюсь загрузить все из одного компонента следующим образом: 

export default function HomeMenu() {
return (
    <div>
        <h1>Menu</h1>
        <Menu></Menu>
    </div>
)
}

Я отображаю каждый элемент своего списка и передаю элементы другому компоненту, но проблема в том, что мои изображения и значки с отличным шрифтом не загружаются.

Когда я запускаю проект или обновляю sh его, я получаю следующий результат: 

Burgers/static/media/burger-menu2.d3dca9de.png

Консоль выводит это: 

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.

Раздел изображений элементов панели инструментов разработчика показывает следующее:

enter image description here

Folder structure:

введите описание изображения здесь

Я что-то упускаю из виду? Я просмотрел много материалов об импорте / экспорте изображений, но ни одно из решений у меня не помогло.

1 Ответ

1 голос
/ 12 июля 2020

Измените MenuItem.js как, 

export default function MenuItem({itemInfo}) {
return (
    <div>
        {itemInfo.name}
        <img src={itemInfo.img} alt='' />
        {itemInfo.icon}
    </div>
)
}

Чтобы исправить проблему со значком, передайте компонент как jsx в объекте. Измените как: 

export const MenuList = [
    {
        id: 1,
        name: 'Burgers',
        img: burgerImg,
        icon: <FaHamburger /> //jsx
    },
...

jsx - это просто javascript с некоторым синтаксическим сахаром.

...