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

【问题标题】：Error message when image is added to JS React Portfolio将图像添加到 JS React Portfolio 时出现错误消息
【发布时间】：2020-07-10 19:06:00
【问题描述】：

我正在尝试将图像添加到 JS 反应组合。我在 localhost:3000 上运行它，当我输入我的代码时，会出现一条错误消息：

编译失败。

./src/components/pages/achievements.js

找不到模块：错误：无法解析 'D:\Desktop\claytons-portfolio\src\components\ 中的 '../../../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>
  );
}

【问题讨论】：

标签： javascript reactjs image compiler-errors

【解决方案1】：

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

【讨论】：