React中如何将本地图片URL作为prop传递给组件实现图片展示

解决方案 #

你需要修正两处问题，即可实现图片正常加载： #

1. 修复字段拼写错误

你当前projects数组中定义的描述字段为expect，但传递给ProjectCard组件时调用的是project.excerpt，字段名不统一会导致描述内容无法正常渲染，先将数组内的字段名统一修改为excerpt。
另外React列表渲染必须添加key属性，你需要在map遍历的外层容器上补充该属性。 #

2. 修正图片路径

根据你的项目结构，有两种常用的图片加载方案可选：

• 方案一：资源存放在public目录（适合图片数量多的场景）
  把整个assets文件夹移动到项目的public目录下，React脚手架会直接识别public目录下的静态资源，projects数组内的图片路径直接写根路径即可：

  imageUrl: "/assets/free-stock-image-1.jpg"
  

• 方案二：资源存放在src目录（适合图片数量少，需要打包优化的场景）
  如果要保留assets在src目录下，需要先在ProjectSection顶部导入所有图片，再将导入的变量赋值给imageUrl：

  // 顶部导入图片
  import img1 from "../assets/free-stock-image-1.jpg";
  import img2 from "../assets/free-stock-image-2.jpg";
  import img3 from "../assets/free-stock-image-3.jpg";
  
  // 数组内赋值
  const projects = [
    {
      title: "Project 1",
      imageUrl: img1,
      excerpt: "This is my project about...",
    }
    // 剩余两个项目同理配置
  ]
  

修正后的完整代码示例

import React from "react";
import ProjectCard from "./ProjectCard";
// 方案二需要打开下方注释
// import img1 from "../assets/free-stock-image-1.jpg";
// import img2 from "../assets/free-stock-image-2.jpg";
// import img3 from "../assets/free-stock-image-3.jpg";

function ProjectSection() {
  const projects = [
    {
      title: "Project 1",
      // 方案一路径，方案二替换为 imageUrl: img1
      imageUrl: "/assets/free-stock-image-1.jpg",
      excerpt: "This is my project about...",
    },
    {
      title: "Project 2",
      imageUrl: "/assets/free-stock-image-2.jpg",
      excerpt: "This is my project about...",
    },
    {
      title: "Project 3",
      imageUrl: "/assets/free-stock-image-3.jpg",
      excerpt: "This is my project about...",
    },
  ];
  return (
    <div className="container text-center my-5">
      <h1>
        My <span className="text-info">Projects</span>
      </h1>
      <div className="lead">I build products. Just like this website</div>
      <div className="row my-5 pt-3">
        {projects.map((project, index) => (
          <div className="col-12 col-md-4 py-2" key={index}>
            <ProjectCard
              title={project.title}
              excerpt={project.excerpt}
              imageUrl={project.imageUrl}
            />
          </div>
        ))}
      </div>
      <div className="my-5">
        <a href="/" className="text-dark text-right">
          <h5>
            See my projects
            <i className="fas fa-arrow-right align-middle"></i>
          </h5>
        </a>
      </div>
    </div>
  );
}

export default ProjectSection;

ProjectCard组件本身逻辑无需修改，只要传入的imageUrl路径正确，即可正常加载图片。

内容的提问来源于stack exchange，提问作者junk1ord