I'm creating a web site and the site consists of a few images. Locally, everything displays correctly, but when I upload it to my server, some of the images are not displayed. None of the GIFs / Animated GIFs are displayed at all and some of the jpeg images are not displayed (while others are OK). The only images which don't appear to be effected are PNG, which display OK.
If I check FireBug and hover over the image link, I receive the message Failed to load given URL.
If I enter a direct URL link to the image on the server, the image is downloaded so it's definitely there.
Here's my CSS:
body {
background-color: #000;
background-repeat:no-repeat;
background-position:top;
background-image:url(../images/background2.gif);
}
I created another web site using the same code, but with a different background.gif image and everything displays correctly, so I'm not sure what else is different?
Also, I have tried deleting the images from the server and re-adding them, but still no luck.
Try putting in the full path in the url:
e.g. background-image:url(http://www.your-site.com/images/background2.gif)
-if that works, then check your paths and make sure the css url matches your directory structure.
Instead of using:
background-image:url("../images/background2.gif");
Use:
background-image:url("/images/background2.gif");
Starting with "/" moves to the root directory and starts there
Starting with "../" moves one directory back and starts there
(also it's a good practice to always include quotes on paths)
Thanks for everyone's help, its turns out that this was a problem with some sort of bandwidth restriction on my work internet. If I viewed the site from anywhere else the images were all loaded..... I really though I was going mad for a while! Thanks again.
Related
I know I can add images to a html file by the following syntax
<img src="*****">
But my question is can i copy any images link from the web and add them to my html file?
i'm not talking about the copyright laws regarding this, just, can every image link be used as the image source in html?
I was writing a code in codepen where i embedded a link to an image from devianart, but the image didn't show up.
I think it depends to the website policy; Some websites don't let you to use their hosted images in your webpage, and some others do.
this is what i find on W3schools:
Definition and Usage:
The required src attribute specifies the URL of the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
The URL of the image.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like
src="image.gif")
Hope this is helpful :)
make sure image fully open in your browser tab/
i also check it but it work in codepen may be you doing something wrong first need to write clear what you want
try this image tag in codepen
I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.
My image thumbnail links to the full size image. Now only the image is showing up as some sort of code. I have been using the same HTML editor for years, all the pages are the same. It is only this group of 5 pages that have thumbnails. Take this link for example:
ÿØÿáExifII*ÿìDucky2ÿáyhttp://ns.adobe.com/xap/1.0/ ÿíHPhotoshop 3.08BIMZ%G8BIM%üá‰È·Éx/4b4XwëÿîAdobedÀÿÛ
I also discovered that if I get this code an then go up to the history and click on the name of the photo it pops right up as it should have been. I have no idea how to fix this. I have uploaded the photos several times with two file managers, used other photo software aswell. My editor shows that these pages are fine, but IE shows that the pages have no style and all browsers show the linked image problem.
I know this doesn't make much sense to you professionals, but this is my business website and a customer told me about the problem. After 8 hours of trying to fix this I am hoping you could help.
The problem:
This problem occurs when an IMG changes or got touched (by adobe, in your case) AFTER it was uploaded to the server and the name of the new (or modified) IMG remained the same. The image shown does not get refreshed. The old image is still shown, even though the database holds the right image. I have narrowed it down to the fact that the IMAGE IS CACHED in the web browser. If we hit the RELOAD button in Firefox/Explorer/Safari, everything gets refreshed fine and the correct image just appears.
I verified that on your site running the following:
function is_cached(img_url){
var imgEle = document.createElement("img");
imgEle.src = img_url;
return imgEle.complete || (imgEle.width+imgEle.height) > 0;
}
And then I called this function which returns true or false depending on cached or not:
is_cached("photos/back_to_school_pr5_tn.jpg");
And the result came back as:
<- true
Remember: When uploading an image, its filename is not kept in the database. It is renamed as Image.jpg (to simply things out when using it). When replacing the existing image with a new one, the name doesn't change either. Just the content of the image file changes.
Solution one - No code required:
Since you are not in the coding business (as you claim), all you need to do is to rename the IMG after it's been touched by adobe.
Whenever you modify a photo in adobe or you upload a new IMG you should give it a new name since the older version of the IMG IS STILL IN CACHE.
Solution two - Coding required:
If touching the IMG with adobe is a constant thing that you do after you upload the original picture, then the above solution can be an hassle, so you might want to look into ways to force the web browser to NOT cache images from this page.
NOTE: This solution is only good for the future. In your case, the IMG is already cached.
Besides, this will only work if the actual IMG is inside your HTML, but on your site the link takes you to the actual IMG.
Solution three - Coding required:
An important addition to the above solution is that you can never force a browser to do anything. All you can do is make friendly suggestions. It's up to the browser and the user to actually follow those suggestions. A browser is free to ignore this, or a user could override the defaults.
So the best long-term solution will be to save the filename with the database. This way, if the image is changed, the src of the IMG tag will also change.
For example:
<img src="picture.jpg?1222259157.415" alt="">
where "1222259157.415" is the current time on the server. (Note: I used python's time.time() to generate that)
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.
**** EDIT: SOLVED HERE Relative paths from file for img, a and header ****
Somewhat new to web design.
I just finished creating a dynamic site. It can read domain/category, domain/category/this-article-about-x, all redirecting to domain/index.php and working well.
However, I quickly learned that whenever I used a relative path such as ./include, the relative path was taking in account the current URL, and not the actual url where the php file is at.
I have 2 questions that I couldn't answer when browsing the internet for a long time:
1) If domain/index.php is trying to show an image with ./thumbnails/science/image.jpg, it won't work if the actual url is domain/category/, but it WILL work if its just domain/category(no slash at the end). Why this inconsistency? The HTML code is showing the src to the image is the same on both cases.
2) My header has a dropdown menu with categories. Once its submitted, it will call itself (header.php), see which category the user chose and redirect to domain/category. All works well. You can then rechange the dropdown menu to another category and everything loads again. But again, if you access directly domain/cateory/ (with the slash at the end), the CSS won't load, the images won't load as said on question 1, and submitting the form will cause a problem because it will look for header.php on domain/category/, and not just on domain where the header.php file actually is.
I have successfully used dirname(FILE) to make sure my includes all work (as far as my testing has gone, no errors). But I could not use dirname(FILE) to generate links or images 'img src=' that will always point to the images regardless of the URL.
On localhost, the HTML is coming as img src=c:\path\htdocs\thumbnails\img, which is right, but the image does not display anyway. Same with the 'a href' links. Trying to create links with dirname(FILE) created links on localhost as c:\correctpath, but clicking on them did absolutely nothing. Also, using header with dirname(FILE) to handle the redirection from the dropdown menu caused it to cease working as well (but if I used ./ . dropDownMenuValue, it would again correctly change the url to domain/categoryChosen)
How can I use a consistent method for relative urls that allow me to work on localhost and then upload to my web host without the need make changes to the files, AND that works with dynamic websites that have pretty name urls through htaccess?
Thank you,
This is all very puzzling for me how getting a relative path from the current file path is being so hard and generating so many different issues, and why only include statements seem to work well with dirname(FILE)
Edit: http://board.phpbuilder.com/showthread.php?10374336-RESOLVED-mod_rewrite-for-SEO-Friendly-URLs-and-relative-path-issue-fixes
I've found this on other sites, but it requires you to change the base everytime you want to go from localhost to the web. I'm trying to avoid that. Clearly there has to be a simple way to do something so basic. I can't believe google and everybody else are changing paths when they are ready to make something live.
You should just always use absolute paths for public files like media. If you don't want to do that for some reason or your site is just too involved at this point you'll have to create rewrite rules for the other file types so they can also be included from the correct path.