Importing image files in Create React App

We had a problem serving image files in our application built with Create React App this week because we were trying to access them from our public folder in our JavaScript files that lived in our src > components folder.

The first error we got was: You attempted to import ../../public/images/001-saloon.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. The first way to fix this was to move the images into the src folder.

return (
  <img src="./images/cat.jpg" alt="" />
)

Then we needed to import the file path as outlined in the Create React App docs:

import catImgSrc from "./images/cat.jpg"

return (
  <img src={catImgSrc} alt="" />
)