I have been having this issue for awhile now. I'm using reactjs and trying to add a background image to a div tag
<div className="ficon"></div>
in the css file I have
.ficon {
max-width: 100px;
max-height:100px;
background-image: url('/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/folder-icon (1).png');
}
The thing is that it works when the url address is http or from the internet, but not when it's local in my computer. I tried using the relative path and that didn't work either. It compiles without any errors or warnings, it just doesnt display the image. I know the url is right because it works when I use it as an image.
<img src="/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/folder-icon (1).png"/>
Thanks in advance!
Have you tried using a relative path to the image file? For example:
<img src="src/images/folder-icon (1).png" />
Also consider removing the space from the filename.
Related
I have built my app using react-bootstrap
I have an image tab inside my component. It looks like this:
render() {
return (
<div id="homePage">
<div class="hero">
<Image src="/images/welcome-page-pic.jpg" responsive />
</div>
</div>
);
Yes, the tag for image in this framework is "Image" not "img".
This will display the image but its not very responsive, so I did some playing around in dev tools and found a styling that worked if I used the image as a background image in css using the following styling:
.hero {
background-image: url(/images/welcome-page-pic.jpg);
height: 400px;
background-size: cover;
background-position: center right;
}
This, of course, requires removing the tag and src altogether, but doing that just removes the image. If I try adding the styles to the HTML (or rather JSX) instead of the css, then the page just doesnt load at all. I also tried leaving the image and src and just adding the css minus the background-image styling - also a no go. Not sure if this is an issue with the framework or something stupid im doing. Thanks.
UPDATE: after playing around a bit more, I found that for whatever reason, my local host is not accepting the class "hero" into the nested div. If I add it in devtools manually, the image appears and responds how i want it to. Now the question is why the class isn't assigned to the div upon page load of the jsx.
I think it should be className in react, from memory.
im really new to this but heres my problem. I need to upload a pic onto my website (im using aptana studios 3). So i save my image as jpeg and use the code:
now it acknowledges that I am uploading the picture but it won't load. Do i have to convert the image or save it a certain way?
Oh buddy, make sure to post the code you're having issues with. In any case, it doesn't really matter what file extension you use (though .png may be the best for web). I'm assuming this is hard-coded HTML, if that is the case, I would use a simple <img /> element to display a picture. Make sure the image is saved in a nearby directory.
<div>
<div class="item"><img src="./example.png"/></div>
</div>
In the example above, example.png is located in the same folder as my index.html file. We use the attribute src, not href. An href attribute dictates what page is to be loaded when an element, e.g. an <a> element, is clicked on. If you have a CSS stylesheet, it might be preferable to load the image as a background-image to a <div> element, so that it would be easier to manipulate image properties like height and width. An example of that would be:
<div>
<div class="item"/></div>
</div>
..and the CSS:
.item {
background-image: url("boxes.png");
width: 800px;
height: 600px;
background-size: contain;
}
Here, I set the image's height and width, and tell my styles that I want the whole image to be show with background-size: contain;.
I hope this helps.
I have made a div as follows:
<div class="fbook" style=" border:thin; border:1px solid black; float: right; margin-top:50px; margin-right:5px">
<img src="facebook.jpg"></img>
</div>
The facebook.jpg file is placed in the same folder as that of the html file. But still the image appears to be broken in the browser. I guess the browser cannot locate the image path. Can anyone please help me resolve this issue. The image is as follows:
Image is a self closing tag:
<img src="facebook.jpg" />
Double check that you spelled it correctly (and used correct capitalization, the file type is .jpg and not .png or .gif etc.). Another thing you could try to do is use the full url:
<img src="http://www.example.com/facebook.jpg" />
And just some other comments...
You are missing a semi-colon after margin-right:5px and you can condense margin-top and margin-right into shorthand
margin:50px 5px 0 0;
or
margin:50px 5px;
if you want the 50px margin on both top and bottom, and you want the 5px margin on both left and right.
Try this instead:
<div class="fbook" style="border:1px solid black; float: right; margin-top:50px; margin-right:5px">
<img src="./facebook.jpg" />
</div>
I changed the path to "./" which means it's relative to where to document is and I also made the img tag self-closing. It doesn't have an end tag like a div does.
This works perfectly ok. I tried putting an image instead of facebook.jpg.
So the question comes ... why are u getting the broken image?
** Please stop using the closing tag its not required.
Probable Answers:
Either the path to the image is wrong, but you mentioned the image is present in the same folder, so this can't be the case.
It seems you have deployed your website on a server, and accordingly you have uploaded the image to their server. I had the same problem few years back.What you can try is:
i) I tried using file manager. You must be having two file managers in the control panel,
try using the other one, as it seems the image is getting corrupted during upload.
ii) Check in the file manager whether the image uploaded is fine on the server, its not broken.
iii) Else create a proper images named folder and place the image inside it and give the appropriate path.
Any of this would definitely solve your problem.
Cheers!!!
i check it but all things are correct, img tag doesn't need close tag you can use this form:
and you can use width and height for image tag.
Not sure what I'm doing wrong here, but I've tried following the example on the relevant w3schools page, but to no avail. So here's what I have so far:
I have four images on my index page, called index1.png, index2.png etc. I combined them into a single png, which is simply index.png. That's my sprite image. I also have a 1x1 transparent image, which is the placeholder for each image in the HTML. Here is the image code:
<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />
And the CSS:
img.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
Testing the page out, I get nothing more than a resized transparent image. The image I want displayed does not show up.
EDIT: Solved. I was an idiot and forgot to go up one directory in my CSS, since my CSS was in a folder on the root. The proper path was "../Images"
Are you sure the path to your images folder is correct? Make sure your path for your sprite is relative to your CSS file, not from where the CSS file is being linked from.
If you had a folder structure like this:
/index.html
/css/style.css
/images/sprite.png
/folder1/index.html
/folder2/subfolder2/index.html
The correct path to use in your CSS file would be this: ../images/sprite.png.
The path would be the same in your CSS file regardless of which index.html file that you would be including it from in the example above.
First and foremost, seeing as though you're using a sprite <img> isn't the correct tag. A div will suffice here. You also don't need to target HTML in your CSS as you've set a class. Try...
<div class="index1"></div>
Also your image url is missing quotation marks.
.index1 {
background-image:url('Images/index.png');
background-position: 0 0;
height:300px;
width:258px;
}
Try using an element other than <img>. A <div> element should work fine.
<div class="index1" alt="alt" title="title" ></div>
And the CSS:
.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
I`m want to make a sprite image, this is my css:
img.Bayern
{
background: url(Images/Popular.png) no-repeat;
width: 14px; height: 11px;background-position: 0 0;
}
and my html:
<img class="Bayern" />
But the image is not displayed, however when i place the css code inside style="" , it works properly.
I checked this similar question: CSS code works if put in style="", fails if put in external css file
and did put the img inside:
<span id="nav-flag">
<img class="Bayern" />
</span>
#nav-flag img.Bayern { ...same css...}
But it still doesnt work. Also i changed the relative path to: ../Images, ./Images, into '...'.
Does anybody knows what im doing wrong??
You're using a relative URL on background image Images/Popular.png (i.e. the URL did not start with a leading slash / nor the scheme like http://).
When using such a relative URL in style attribute, it's relative to the request URL of the webpage as appears in the browser's address bar. So if it's for example http://example.com/page.html, then the image is expected to be in http://example.com/Images/Popular.png.
When using such a relative URL in a CSS file, it's relative to the request URL of the CSS file itself. So if it's for example http://example.com/css/style.css, then the image is expected to be in http://example.com/css/Images/Popular.png.
You need to make sure that the image file is exactly there where the specified URL expects it to be (so, put it in same folder as the CSS file), or you need to fix the URL accordingly so that it's properly relative to the request URL (so, use /Images/Popular.png instead).
Unrelated to the concrete problem, it's quite strange to specify a CSS background image on an <img> element. You normally specify that on some block element like <div>.