在ReactJS中将图像数组导入为缩略图

Question

我正在尝试显示带有一些信息和图像的数组。我尝试使用地图，一切正常，直到我尝试放置图像。我做错了什么？

这是我的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}作为字符串传递

我不知道该怎么做了。

Answer 1

你在用CRA吗？您可以直接在portfolio.image中传递图像路径

Answer 2

这都怪我。我试图将图像导入为

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

但正确的方法是

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

对不起，我需要一些睡眠。