Question

我有一个目标文件，似乎无法从该文件加载图像，如果我在索引文件中进行导入并调用它，图像将加载并正常工作，但如果我从对象中尝试文件然后它不起作用。我在控制台中没有收到任何错误，并尝试列出来自不同位置的图像。

这是目标文件

export const projects = [
  {
    id: "0",
    image: "../../images/mayhemds.png",
    alt: "TelecomPlus",
    title: "TelecomPlus",
    desc: "Built the TelecomPlus website on the Apostrophe CMS, using the tech stack listed below.",
    tags: ["HTML", "JavaScript", "SCSS", "Apostrophe CMS"],
    source: "https://google.com",
    visit: "https://goggle.com",
  },
  {
    id: "1",
    image: "/public/data_trend.png",
    alt: "telecomplus",
    title: "Project 2",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
    tags: ["Html", "JavaScript", "SCSS", "Nunjucks", "Git"],
    source: "https://google.com",
    visit: "https://goggle.com",
  },
  {
    id: "2",
    image: "../../images/telecomplus.png",
    alt: "telecomplus",
    title: "Project 3",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
    tags: ["Html", "JavaScript", "SCSS", "Nunjucks", "Git"],
    source: "https://google.com",
    visit: "https://goggle.com",
  },
  {
    id: "3",
    image: "../../images/telecomplus.png",
    alt: "telecomplus",
    title: "Project 4",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
    tags: ["Html", "JavaScript", "SCSS", "Nunjucks", "Git"],
    source: "https://google.com",
    visit: "https://goggle.com",
  },
];

这里是 index.js 文件

import { projects } from "./projects";
import "./projects.css";

const Projects = () => {
  return (
    <>
      <div className="project-section" id="projects">
        <div className="project-container">
            <h2 className="project-heading">Projects</h2>
          <div className="card-wrap">
            {projects.map(
              ({ id, image, title, desc, tags, source, visit, alt }) => (
                <div className="project-card" key={id}>
                  <img className="project-image" src={image} alt={alt} />
                  <h3 className="title">{title}</h3>
                  <p className="desc">{desc}</p>
                  <div className="stack">
                    <h4 className="stackTitle">Stack</h4>
                    <ul className="tag-list">
                      {tags.map((tag, i) => (
                        <li className="tag-list-item" key={i}>
                          {tag}
                        </li>
                      ))}
                    </ul>

                    <div className="btn-wrap">
                      <div className="btn" href={source}>
                        Code
                      </div>
                      <div className="btn" href={visit}>
                        Website
                      </div>
                    </div>
                  </div>
                </div>
              )
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default Projects;

我似乎看不到缺少什么。任何帮助将不胜感激！

Answer 1

除非你的文件 public 文件夹，你需要让 webpack 将它包含在包中，因此你应该使用 import / require 及其路径：

// image === "../../images/mayhemds.png"
<img className="project-image" src={require(image)} alt={alt} />

它在 CRA docs 中有解释。

在反应中从目标文件加载图像时出现问题

1 个答案: