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" />
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>
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!
I have a component that represents a "badge". There are hundreds of types of different badges. Every badge is an individual SVG file. The badge component receives a slug for the badge it would need to use. The slug matches the file name. For instance: best-cheesecake would hint we need to display best-cheesecake.svg in the badge control.
Up till now, I've been loading svg images using:
import TestSVG from "../../images/test.svg";
and displaying them using:
<img height="50px" width="50px" alt="my-test-svg" src={TestSVG}/>
It's critical to understand I'm using WebPack and all images get their filenames hashed.
My question is about the best practice if my control needs to load one of the hundreds of SVG files. can my import dynamically using the filename string as it's given to the control via the props where those files get a hashed filename by webpack? Is there a better way? Obviously there has to be a way other than importing all SVG files in the folder...
use require.context concept you can import all the files located in a directory.
Below is the reference to what I have used earlier -
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('path/to/the/folder', false, /\.(png|jpe?g|svg)$/));
Now you can retrieve a particular image by its file name as below
<img src={**images[svg]**} className = {imgClassName} alt = {svg} />
where svg is filename with extension, ex. file1.svg
My solution was this:
I moved my 500+ badge SVG files from /src/images, where I keep all images into /src/images/badges
I have no explicit reference to any of the badge SVG files in my code so WebPack ignores them when creating the dist folder (both dev and production).
I installed WebPack's CopyPlugin and I use it to force the copy of /src/images/badges/*.svg into a badges under my default dist folder (it doesn't care they're not explicitly used in my code)
In my code, I can now use this successfully <img src={"/badges/" + this.props.badgeName + ".svg"}/>
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
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} />