1

I'm doing server-side rendering with React DOM Server using Create React App. I'm trying to load a static image but it's not showing up in my browser. Here is my app.js code

import './App.css';
import React from "react";
import Pic from './Images/pic.png'
function App() {
  return (
    <div className="App">
      <img src={Pic} />
    </div>
  );
}
export default App;

The image is copied into the build folder but it's not showing up in the browser Folder hierarchy

I get the following error in the browser

GET http://localhost:8000/[object%20Object]
mrivanlima
  • 561
  • 4
  • 10
Abdullah Qureshi
  • 161
  • 8
  • Please check the following https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react – Akram Hossain Dec 12 '20 at 08:55
  • What does `Pic` contain? `console.log` setting a debugger breakpoint should help. – madflow Dec 12 '20 at 08:55
  • on console.log it displays empty curly braces "{}". – Abdullah Qureshi Dec 12 '20 at 09:06
  • I assume that you either run your server directly (without webpack) or your webpack.config.js is not configured correctly for image imports. If you have a webpack.config.js, show it so we can help you next. If you just run your server directly, I suggested that you should run it through webpack with a suitable config for your need. Let me know further if you need help setting this up. – Phuoc Do Mar 05 '21 at 17:49

1 Answers1

0

Try

<img src={require(./Images/pic.png)} width="100" height="50" />
Jahanzeb Awan
  • 164
  • 12