Search code examples
reactjscreate-react-appbundling-and-minificationdata-uri

Image paths are getting converted to data URI instead of URL

I have a basic React app set up using the Create-React-App tool.

I have an images in my images folder: /src/img/logo.png

I am including it in one of my component JS files (let's say it's located at /src/Login.js) like this:

import logo from "../img/logo.png";

I am embedding them into my code like this:

<img src={logo} />

When I look at the rendered page, I see that the "src" attribute of this image has a data URI. How can I get the app to generate a URL for this image instead of a data URI?

Solution

  • Why are you importing image with import, you can directly use path or take that path in one variable and than pass it to the src like this: 

     var imgUrl = "../img/logo.png"; 

 <img src={imgUrl} />