javascript - 将图像添加到 JS React Portfolio 时出现错误消息

Question

我正在尝试将图像添加到 JS react 组合。我在 localhost:3000 上运行它，当我输入我的代码时，出现一条错误消息:
编译失败。
./src/components/pages/achievements.js
未找到模块:错误:无法解析“D:\Desktop\claytons-portfolio\src\components\pages”中的“../../../static/assets/images/achievements-miles.jpeg”
我拥有的代码是:

import React from "react"; 
import achievementPicture from "../../../static/assets/images/achievements-miles.jpeg";

export default function() {
  return (
    <div className="content-page-wrapper">
      <div
        className="left-column"
        style={{
          background: "url(" + achievementPicture + ") no-repeat",
          backgroundSize: "cover",
          backgroundPosition: "center"
        }}
      />

      <div className="right-column">
      Jack R. and Mary Lois Wheatley Endowed Leadership Scholarship
      <br></br>
      The Wheatley Institution
      <br></br>
      Apr 2020
      <br></br>
      <br></br>
      Outstanding Delegation for Representation of the United Arab Emirates in the Joint Defense Council
      <br></br>
      National Council on U.S.-Arab Relations: Model Arab League
      <br></br>
      Feb 2020
      <br></br>
      <br></br>
      Eagle Scout
      <br></br>
      Boy Scouts Of America
      <br></br>
      2012
      </div>
    </div>
  );
}

Answer 1

我假设您的图像在 src 文件夹之外。如果要导入图片，则应将其包含在 src 路径中或将项目配置为能够指向 src 文件夹之外。有一个类似的问题，您可以查看答案:
The create-react-app imports restriction outside of src directory