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?
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} />
Related
In a react App, I would like to store the image path or at least the name of the image file in DB. The image source would be dynamically added.
The below code works:
<img src={require("../Images/amazon.jpg")}></img>
The below code does not work (error:Cannot find module '../Images/amazon.jpg'):
const path = `../Images/amazon.jpg`;
<img src={require( `${path}`)}></img>
How can we set the img src dynamically after fetching image path/name from database.
If you have a public folder for assets, then you can try:
<img src={`../Images/amazon.jpg`}></img>
The best way is to just load your images from the URL.
<img src={url}></img>
I have seen the usual ways of loading images in react.
Use the public folder and then set the src normally
Import the image and then set it
import myimage from "../../assets/images/img.png";
<img src={image}/>
Require the image inline
<img src={require(`../../assets/images/img.png}`)} />
I'm looking to see if there is a way like in angular when you set the src for an image and the importing is handled automatically? I'm assuming ill have to playaround with HTMl-loader and file loader
I found this while I was looking for this https://stackoverflow.com/a/36242974/9802012
You can put your image in the public folder and then just do the usual html import <img src="./img.png" />
As the title says I have multiple images and I want to keep them in a json where it stores the url and from there I want to get image data accordingly.
Here is my codesandbox, I am not sure why it is not showing any images after going through a bunch of answers here.
https://codesandbox.io/s/confident-galois-2pn52
Seems like you forget one level
images
in JSON. Code of IMG in component should looks like this:
<img src={data.images.url} alt={data.images.name} />
You should use the JSON like
<img src={`${data.images.url}`} alt={data.images.name} />
Please update your code. It will start showing the images.
Your JSON structure has images object in it which you are not consuming.
All the images are displayed as broken image icon on my React app.Here I'm trying to display this image but this too appears as broken
If you want to call images inside your src folder you have to import it first.
import neonSpace from './neon-space.jpg';
and alter you can use it in your like this:
<img src={neonSpace} />
If you want to call the image only with the URL you must have to put your image in your public folder. (sibling folder of src)
<img src='./neon-space.jpg' />
Hope it helps!
Before i added the id of the object to the url the images loaded fine but once i added the ID The local images are not loading but url images work. Everything is returning fine in the console and it is the correct pathname.
I have tried using require but it just gives me a huge error with all of my images and some css.
I expect the corresponding image to show
This how the image file looks in my data
img: "img/product-8.94-1.png",
< img src={require(`../${img}`)} className="img-fluid"
alt="product"/>
This is the route and Link ( i added id)
<Route path="/details/:id" component={Details} />
<Link to={`/details/${id}`}>
Probably you are using relative paths to images in your app, if you changed route path from http://demo.com/details to http://demo.com/details/id the image cannot find the correct path, you got one extra folder details/id.
You don't show as how you get the path to the image, but if your image is in your assets folder of reactjs app, then import it like a component.
import img from "assets/image.jpg";
and then in component add it img src tag like this:
<img src={img} className="img-fluid" alt="product"/>
If you get images from db, then make sure you use full path to the image.
https://codesandbox.io/s/priceless-ardinghelli-sp0yg