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:
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="" />
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"/>
I am trying to build a portfolio website, with a moving gallery but the image is not displayed, it shows the alternative image instead. Any help is appreciated.Here is the code:
<div class="section1">
<img class="imgr"src="photo_1.jpg" alt="nothing">
</div>
I even copied the relative path from Vscode, but it is still not working.
It must be the path to the image. Try replacing "photo_1.jpg" with "./photo_1.jpg".
this is pretty basic but I can't figure out why my image won't render. The broken image icon doesn't appear and I'm viewing my page on localhost. I'm not sure how to upload a screen shot but I've played with the relative path in many ways and can't figure out the problem. When I link to an online image it renders. I'm using rails/foundation currently but I actually had the same problem using a MEAN stack a couple weeks ago. The issue seems to be only when using a server. Any help is appreciated, thanks. EDIT: my views and assets folder are at the same level (siblings?) views path: app/views/projects/home.html.erb. images path: app/assets/images/volvo.jpg; I've selected the image file and done 'copy relative path' and played with it every which way. I don't think it's the path but who knows.
<h4>pic below</h4>
<img src"../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src"assets/images/bmw.jpg"/>
<img src"../../assets/images/volvo.jpg"/>
<img src"saab.jpg"/>
<img src"../../assets/images/saabtwo.jpg"/>
</li>
</ul>
You are defining your images incorrectly; you forgot the equals sign (=). You need to have src= instead of just src before the image path. This is because of the way the defining/setting of attributes works in html.
For your code, this would be:
<h4>pic below</h4>
<img src="../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src="assets/images/bmw.jpg"/>
<img src="../../assets/images/volvo.jpg"/>
<img src="saab.jpg"/>
<img src="../../assets/images/saabtwo.jpg"/>
</li>
</ul>
As a general rule, to define a style in html, you do this: attribute="value".
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />