im unable to Load local image in React JS
this is the file location:
ive tried using
<img id="shoe1" src="shoe1.jpg"alt="shoe1"/>
<img id="shoe1" src="./shoe1.jpg"alt="shoe1"/>
and within the folder like this too:
<img id="shoe1" src="../img/shoe1.jpg"alt="shoe1"/>
<img id="shoe1" src="./img/shoe1.jpg"alt="shoe1"/>
Are you importing the image on top of the files you want to use them? You should follow this page from the documentation:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
import shoe1 from './shoe1.jpg';
import imgg from "../img/shoe1.jpg";
<img src={imgg} alt="yourimagecomeshere" />
can you move the image to assets folder and do something like this
<img id="shoe1" src="../assets/shoe1.jpg"alt="shoe1"/>
Related
I was importing the images previously like this in React:
import person from '../images/image1.png'
And then using them like this:
<img src={person} alt="" />
Now I want to specify the path in the src itself due to some reason, like this:
<img src="../images/image1.png" alt="" />
But it's not working even though it should.
There are two ways to add images in your JSX with Create React App. The first one is to use import like you did, to import an image that is somewhere in the src folder, like so:
import person from '../images/image1.png'
<img src={person} alt="" />
The second one is to give an image's path to <img>'s src attribute, but it's always relative to the public folder, in a way that the path should starts with /, and / means public folder.
See Adding Images, Fonts, and Files and Using the Public Folder on Create React App's documentation.
For your second attempt to work, you could put images folder inside public folder, and get your images like so:
<img src="/images/image1.png" alt="" />
If your React app will be in a sub folder when deployed, for the second way to work, you should add in your package.json this "homepage":"www.example.com/folder", and use process.env.PUBLIC_URL as below.
<img src={process.env.PUBLIC_URL + "/images/image1.png"} alt="" />
For some reason, the image appears when I open it in notepad, but it doesn't work when I open my HTML file in VSCode. Adding the image in the folder of my HTML file and setting the source seems to work, but I don't want to do that.
Could anyone help?
You can simply change the path in the html tag to wherever you need:
<img src="../OTHER_FOLDER/IMAGE_NAME.png" />
The .. lets you move up one folder in the systems file hierarchy.
If your image is located in the folder one level up from the folder in which is index.html you can use
<img src="../image.jpg">
Else you can use absolute path:
<img src="C:\Users\your_user\picture.jpg"```
use ../ with src=""
like this
<img src="../pictures/pic.png" alt="Image 01">
<img src="../../pictures/pic.png" alt="Image 01">
I am working on a react.js website and I want to link a image (logo) to the website. See folder structure
My image code for the footer logo is
<img className="img-responsive" src="public/assets/image/img/footer-logo.jpg" alt="logo"/>
But the image is not visible on the website when I run it. Any solutions??
If you are using webpack and assuming you are in one of the components as displayed in the image then do:
import logo from '../../public/assets/image/img/foorter-logo.jpg';
<img className="img-responsive" src={logo} alt="logo"/>
If you want to stick to what you have then you can do:
<img className="img-responsive" src="../../public/assets/image/img/footer-logo.jpg" alt="logo"/>
You image src url need to be relative to the file you are using it in. So You need to use it like ../../public/assets/image/img/footer-logo.jpg.
Also in react you need to enclose your source within curly brackets
<img className="img-responsive" src={"../../public/assets/image/img/footer-logo.jpg"} alt="logo"/>
Also if you are using webpack you need to use require with the image src url like
<img className="img-responsive" src={require("../../public/assets/image/img/footer-logo.jpg")} alt="logo"/>
I hope it helps :)
Ran into a similar bug working on a simple Gatsby test.
My path was like:
To resolve as #Kafo stated:
Give your image a named import
Wrap that in curly braces as the value of src
My result:
I have my images folder inside the same subdirectory folder. .
For example:
Domain: http://www.hebronics4u.com / subdirectory: webTract (http://hebronics4u.com/webTract/index.html - the images folder is in the same subdirectory folder.
I have tried all the following ways to get my pics to show and they will not show.
Here is the code:
<img src="../webTract/images/billyGraham.png">
<img src="webTract/images/billyGraham.png">
<img src="images/billyGraham.png">
Does anyone have any suggestions?
Try to use absolute path. <img src="/webTract/images/billyGraham.png">
What are there the errors in console logs?
If the images are in exactly the same sub-directory (for example)
http://hebronics4u.com/webTract/index.html is your working file and
http://hebronics4u.com/webTract/billyGraham.png is where your file is situated, simply use the name of the image.
E.g.
<img src="billyGraham.png">
<img src="./images/billyGraham.png">
Also fix your permission on the subfolders.
I am currently doing an assignment for school and my teacher has sent all the project photos which I have saved. The only problem is they will not show up no matter what I try doing.
ex. the image is named "photo1.jpg" and I did:
<img src="photo1.jpg">
But the image will not load. if anyone has any suggestions I'd appreciate it.
If you mean on a webpage then the use this code to generate the image:
<img src="photo1.jpg"/>
Keep in mind that the photo1.jpg needs to be in the same directory as the file (webpage) calling it.
Check the location of the image. It should be in the same folder
<img src = "photo1.jpg" />
if it is not, and it has its own image folder inside your project you can do it like this
<img src = "imagesFolder/photo1.jpg" />
<img src="photo1.jpg"></img>
Don't forget that this links current page folder. If you have in eg. in images directory, then use
<img src="images/photo1.jpg"></img>