Error message when image is added to JS React Portfolio

Question

I am trying to add an image to a JS react portfolio. I am running it on localhost:3000 and when I input my code an error message comes up saying:

Failed to compile.

./src/components/pages/achievements.js

Module not found: Error: Can't resolve '../../../static/assets/images/achievements-miles.jpeg' in 'D:\Desktop\claytons-portfolio\src\components\pages'

The code that I have is:

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>
  );
}

score 0 · Accepted Answer · answered Jul 10 '20 at 19:12

I assume that your image is outside of src folder. If you want to import the picture you should include it in src path or configure your project to be able to point outside of src folder. There was a similar question you can look answers on: The create-react-app imports restriction outside of src directory

Error message when image is added to JS React Portfolio

1 Answers1