How do I import an image file into a React JSX file when using Babel Standalone?

Question

I am developing a web app using the React CDN. In a .js file that defines a React component using JSX, I am trying to use the JSX <img> element to render an image from a local image file. Unfortunately, the image is not displaying.

In the <body> of my index.html, I have the following:

 <div id="coursesModeTab"></div>

...

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="scripts/coursesMode.js" type="text/babel" 
             data-plugins="transform-modules-umd" 
             data-presets="react" data-type="module">

Then, in coursesMode.js, I have the following:

import ssLogo from "./images/sslogo2.png";

function Logo() {
    return <img className="mode-page-icon" src={ssLogo} alt="SpeedScore logo"/>
}

const coursesDiv = ReactDOM.createRoot(document.getElementById('coursesModeTab'));
coursesDiv.render(<Logo />);

Thanks to this related StackOverflow post, I was able to eliminate all console errors related to not being able to use import statements in my coursesMode.js file. However, the image still does not display! Instead, I see

when the app attempts to render the image. I can confirm that images/sslogo2.png exists in my project. I have also tried putting sslogo2.png in a public/ directory and at the root of my project, but neither worked.

How can I make the image render properly?

How do I import an image file into a React JSX file when using Babel Standalone?

0 Answers0