Unable to render PNG on browser with React

Question

I have a React app but when I try and render a PNG file in the "src" folder, I get the following on the Google Chrome browser:

There is no Public folder in my project, so I am unable to place the image file there. The following is my code when loading the image:

What can I do instead?

Many thanks!

I don't think you can import an image outside of your CRA project, unless you change project webpack config. Is there a reason that you do not have a public directory? You could upload it on a server and put the URL as src. — c0m1t
– c0m1t, Commented Aug 7, 2022 at 16:48
This is not a CRA project, but rather a Splunk create project: and a Public folder is not created by default: splunkui.splunk.com/Create/AppTutorial — Patrick O'Rourke
– Patrick O'Rourke, Commented Aug 7, 2022 at 16:58
Does this answer your question? Load local images in React.js — Konrad
– Konrad, Commented Aug 7, 2022 at 16:59
Yes, this solved my issue: import React from "react" import splunklogo from './splunk-logo.png'; export default function NavbarComponent() { return ( <nav> <img src={splunklogo} alt="Splunk-Logo"/> </nav> ) } — Patrick O'Rourke
– Patrick O'Rourke, Commented Aug 7, 2022 at 17:10

KrLiTs · Accepted Answer · 2022-08-07 17:08:27Z

0

You can solve that using 2 simple ways, one of them is to take the image address as a constant, the other one can be passing the address directly. To clarify the images cannot be outside(no absolute path) of your project, i.e. the direction to your image should be as follows ../splunk-logo.png


import "./styles.css";
const image = require("./Landscape.jpg");

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/* One way */}
      <img src={image} alt="Landscape img" height="200px" />
      <br />
      {/* Second way */}
      <img src={require("./Landscape.jpg")} alt="Second Land" height="200px" />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Test Here

answered Aug 7, 2022 at 17:08

KrLiTs

1667 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to render PNG on browser with React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related