0

Подскажите пожалуйста почему не подгружаются картинки? Вроде все верно подключил...

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

cartReducer.js

    import Item1 from "../images/item1.jpg";
import Item2 from "../images/item2.jpg";
import Item3 from "../images/item3.jpg";
import Item4 from "../images/item4.jpg";
import Item5 from "../images/salat-ceszar.jpg";
import Item6 from "../images/salat-s-krabovumi-palochkami.jpg";
import Item7 from "../images/salat-shyba.jpg";
import Item8 from "../images/salat-stolichny.jpg";
import Item9 from "../images/coffe-black.jpg";
import Item10 from "../images/black-tea.jpg";
import Item11 from "../images/сacao.jpg";
import Item12 from "../images/item12.jpg";
import Item13 from "../images/fanta.jpg";
import Item14 from "../images/green-tea.jpg";
import Item15 from "../images/sprite.jpg";

const initState = {
  items: [
    {
      id: 1,
      name: "Фирменная",
      category: "pizza",
      price: 60,
      description: "Курица, грибы, сыр, томатный соус",
      img: { Item1 },
    },
    {
      id: 2,
      name: "Курица с грибами",
      category: "pizza",
      price: 50,
      description: "Курица, грибы, томатный соус",
      img: { Item2 },
    },
    {
      id: 3,
      name: "Мясная",
      category: "pizza",
      price: 70,
      description: "Ветчина, сыр, помидор, чеснок, соус, майонез",
      img: { Item3 },
    },
    {
      id: 4,
      name: "Курица с ветчиной",
      category: "pizza",
      price: 50,
      description: "Ветчина, соус, сыр, майонез",
      img: { Item4 },
    },
    {
      id: 5,
      name: "Цезарь",
      category: "salat",
      price: 35,
      description: "Куриное филе, листья салата, сухарики, майонез, чеснок",
      img: { Item5 },
    },
    {
      id: 6,
      name: "С крабовыми палочками",
      category: "salat",
      price: 30,
      description: "Крабовые палочки, яйца, кукуруза, огурец, майонез",
      img: { Item6 },
    },
    {
      id: 7,
      name: "Селедка под шубой",
      category: "salat",
      price: 29,
      description: "Селедка, свекла, картошка, майонез",
      img: { Item7 },
    },
    {
      id: 8,
      name: "Столичный",
      category: "salat",
      price: 32,
      description: "Курица, горошек, огурцы, капуста, картошка, майонез",
      img: { Item8 },
    },
    {
      id: 9,
      name: "Черный кофе",
      category: "drink",
      price: 20,
      description: "",
      img: { Item9 },
    },
    {
      id: 10,
      name: "Черный чай",
      category: "drink",
      price: 20,
      description: "",
      img: { Item10 },
    },
    {
      id: 11,
      name: "Какао",
      category: "drink",
      price: 20,
      description: "",
      img: { Item11 },
    },
    {
      id: 12,
      name: "Кола",
      category: "drink",
      price: 20,
      description: "",
      img: { Item12 },
    },
    {
      id: 13,
      name: "Фанта",
      category: "drink",
      price: 20,
      description: "",
      img: { Item13 },
    },
    {
      id: 14,
      name: "Зеленый чай",
      category: "drink",
      price: 20,
      description: "",
      img: { Item14 },
    },
    {
      id: 15,
      name: "Спрайт",
      category: "drink",
      price: 20,
      description: "",
      img: { Item15 },
    },
  ],
  addedItems: [],
  total: 0,
};

const cartReducer = (state = initState, action) => {
  return state;
};
export default cartReducer;

и вот куда подключаю

Pizza.js

import React, { Component } from "react";
import { Card, Button, CardColumns } from "react-bootstrap";
import { connect } from "react-redux";

class Pizza extends Component {
  render() {
    let itemList = this.props.items.map((item) => {
      return (
        <Card className="text-center" border="primary" key={item.id}>
          <Card.Img variant="top" src={item.img} />
          <Card.Body>
            <Card.Title>{item.name}</Card.Title>
            <Card.Subtitle>{item.price}</Card.Subtitle>
            <Card.Text>{item.description}</Card.Text>
            <Button variant="primary">В корзину</Button>
          </Card.Body>
        </Card>
      );
    });
    return <CardColumns className="m-3">{itemList}</CardColumns>;
  }
}

const mapStateToProps = (state) => {
  return {
    items: state.items,
  };
};

export default connect(mapStateToProps)(Pizza);
1
  • Картинка входит в состав Card 31 июл 2020 в 21:42

1 ответ 1

0

Необходимо убрать скобки:

img: { Item1 }

должно быть: img: Item1, в массиве. Со скобками получается что item.img равен объекту в котором свойство Item1 равно строке с адресом картинки.

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.