Блог

Главная - Вопросы по программированию - Импортировать массив изображений в виде миниатюр в ReactJS

Импортировать массив изображений в виде миниатюр в ReactJS

#arrays #reactjs

#массивы #reactjs

Вопрос:

я пытаюсь отобразить массив с некоторой информацией и изображениями. Я пробовал использовать map, и все работает просто отлично, пока я не попытаюсь разместить изображение. Что я делаю не так?

Это мой portfolio.js

     import React from "react";
    import "../sass/Portfolio.scss";
    import { PortfolioList } from "./data/PortfolioList";

    let portfolio = PortfolioList.map((portfolio, key) => {
      return (
        <div className="col-md-6 portfolio-item" key={key}>
          <img src={portfolio.image} alt="Imagem do Portfolio" />
          <figcaption className="portfolio-info">
            <h1 className="portfolio-heading">{portfolio.description}</h1>
            <a href={portfolio.button} target="_blank" rel="noopener noreferrer">
              Visitar
            </a>
          </figcaption>
        </div>
      );
    });

    const Portfolio = () => {
      return (
        <section id="portfolio">
          <div className="separator" />
          <div className="container">
            <h1 className="heading-sobre">Alguns dos meus trabalhos</h1>
            <div className="row">{portfolio}</div>
          </div>
        </section>
      );
    };

export default Portfolio;

Затем я создал PortfolioList со своим массивом

 import barberclube from "../../img/sites/barber-clube85.png";
export const PortfolioList = [
  {
    image: { barberclube },
    description: "Website em WordPress para uma barbearia",
    button: "https://barbearia.clube85.com"
  },
  {
    image: "https://via.placeholder.com/380x250",
    description:
      "Lorem ipsum dolor amet sic culture and community sports competition.",
    button: "https://google.com"
  }
];

Я перепробовал много вещей в моем portfoliolist.js , например:
1. Изменение изображения: на изображение: «../img/barber-clube85.png»
2. передача {barberclube} в виде строки

И я больше не знаю, что делать.

Ответ №1:

Используете ли вы CRA? Вы можете передать путь к изображению непосредственно в portfolio.image

Комментарии:

1. да, это так. Я попытался передать в PortfolioList.js массив в виде изображения: «../img/barber-clube85.png», но это не сработает.

2. Консоль. зарегистрируйте свое изображение в компоненте. С помощью CRA я получаю что-то вроде статического / мультимедийного пути. Еще одна незначительная вещь, пожалуйста, не используйте свой индекс в качестве ключа в вашем дочернем элементе. Вместо этого используйте UniqueID. Lodash предлагает вам его, если у вас есть Lodash в вашем проекте.

Ответ №2:

Это была моя ошибка. Я пытался импортировать изображение в виде

 import {hero} from "../img/hero.svg";

Но правильный способ — это 

 import hero from "../img/hero.svg";

Извините, мне нужно немного поспать.