I have a rather unique problem. I'm trying to get a logo to display, however it simply doesn't show - it will however show in Firebug as it should (i.e. hover over the image and it displays the preview).
I have tried absolute filepaths, relative filepaths and everything else under the sun. The logo sometimes appears for 2-3 seconds upon refresh then will simply vanish from the screen - I've never experienced a problem like this and find this truly mind-blowing.
Am i missing something obvious here?
Link: http://project.n8geeks.com/
I think you should set Height attr for div .logo
With div Img you should set width and height.
I try set height 30px for div .logo. It works.
I went to the link and it seems like its a web server configuration issue, since Chrome's Dev Tools said:
Resource interpreted as Image but transferred with MIME type text/html: "http://n8geeks.com/".
what you need to do is add the png MIMEtype to your web server configuration.
Have you tried using a different image just to test? I have tried it (with firebug) and it seems to work.
The issue was because, for some reason, there was no default .htaccess file - not sure how or why that should effect the displaying of images, but that was the solution for my issue.
Related
Well, basically i created a image inside a div using the img tag in a HTML file that i've been writing and the image just wont show up on the browser. Inspect says the image cannot be loaded and it's CSS is set to 'display: none!important'.I wasn't able to untick it even in inspect. Can you help me?
No class was declared on the img tag and the div holding it.
I haven't written the 'display:none!important' css anywhere on the page.
3.There are other images in the same page which is displaying perfectly fine. I placed another image on the div which is holding my problem-image and even it is showing up. Renaming the image works too [Although i would like to know why].
The code used:
<div class="col-1"><img src="../Home-Page/images/twitter-logo-silhouette.png" alt="twitter"></div>
Any other image will work fine,The image is now kept renamed by finding it in finder, the error is gone now. But i still would like to know why it is so. If i rename it back. The error will appear once again.
Your adblocker is blocking the image out, i guess.
If you try to rename your file and alt tag without naming twitter it will work, as you mentioned above
I am trying to use a background-image using a "root-relative" path like so : background-image: url("/img/bg.jpg");.
The property is correctly showing in Chrome but the image does not appear. If I change it to be http://localhost:8080/img/bg.jpg it appears.
If I visit http://localhost:8080/img/bg.jpg the image is visible.
If I add a <img style={{width:"100px", height:"100px"}} src="/img/bg.jpg"/> it also appears properly (I am using React).
I browsed SO for a moment and noticed several people having issues with url but none of them was similar.
In case there is any kind of link, I'm using Less with webpack-dev-server. The image is in a static directory.
I finally managed to fix this issue thanks to issue #2248.
I simply disabled the source maps for css-loader and less-loader and that made the trick.
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
While these insertions are not there in source-code.
Also my images don't load even though they are there on host server. Don't know if this problem is related to insertions mentioned in title of my post or some other reason!
I tried deleting images from server and upload again. Page works fine when opened from computer but same files when uploaded to server, don't show images.! Any advice is much appreciated.
Update: I restored firefox to factory defaults and that did the trick. Now images are showing. and also "::before" is not being inserted in inspect-element window. But a closing tag is still inserted. If someone could please explain the probable cause that stop images from showing, before factory-reset was done? Now I'll work on chrome, as it is also not showing the images
$0 indicates that this is the "current" element being inspected. You can type $0 into the chrome console and it will be the HTMLImageElement you are inspecting. See Chrome DevTools API
I recently faced the same thing when trying to put content in the <img> tag with javascript.
When I use the img tag without src parameter being set, same thing happens. As soon as I declared at least src="";in Firefox it shows proper unclosed <img> tag without the ::before.
I'm going to search for more info on this to expand the answer, just wanted to clarify - are your img tags possibly declared without the src attribute and then worked with after in some fashion? (<- this is a comment to the original question, I can't comment.)
I have a firefox-specific issue with this page :
http://www.buzzx.com/feedback.php
It renders fine in IE, Safari, Chrome and every other browser invented by man, but in Firefox the background images do not show (The 'Feedback' link on the left and a white box around the content).
Any help appreciated, I'm completely stumped here.
update : the images show if i put in the full path in the css - http://www.buzzx/..../images/... as opposed to having a relative path. but i really want to avoid doing this.
Had a similar problem today, I can't see your css, but, this is what I found out, I had to move the html portion to the bottom of the css, at least below the other background elements I had, so that it would show. I hope this helps.
Just getting into Webdesign HTML & CSS, I had the same problem.
I used Webdwarf webdesigner to build the basic layout for the website. At first it didn't show in Firefox, but then I also put up an over-sized transparent picture made in GIMP. Just a big square with 100% transparancy. I checked it by clearing the cache in advanced options in Firefox and reloading the page. Changed the background picture a few times, hit reload button and it changed straightaway.
Other problem is often the path string. Webdwarf made the CSS coding for the background for me and used the path string from the current location. background-image:url (./images/background.jpg). It seems firefox wont accept a full length string for the background image
You might want to check against a validator, just to make sure.
Line 48, Column 48: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<h1><div class="page_heading"><div class="fleft">Contact Us</div><div
Very weird!
But I noticed one thing: the images don't load when there's a javascript error (I see it with Firebug) related to Google Ads. The message says:
Permission denied to http://googleads.g.doubleclick.net to call the Location.toString method on http://www.buzzarab.com.
Line 0
Try and test the page without Google ads.
Resolved by adding full path to the css, not a real fix but will do for now till a proper fix is found.