I uploaded a website online, and some of the images on of the pages does not display.
I have checked the path multiple times and I copied and pasted the src link, then just changed the name of the file, which was a number. eg: product1.jpg then product2.jpg, but the image of product 1 would display and not the image of product 2.
Is there anything else I can do to try fix it? Or find where the problem is?
Here is the product page of the current website.
Try using the debugger of the browser
On Chrome you can press F12, then go to the Sources section and check (and preview) the files the browser has recieved. If you see both pictures and you can preview them, then it is the HTML/CSS code of the page which, creates the problem. If you don't see them, the problem must be in the paths(check if you're using relative or absolute paths)
On Firefox you can press F12 and go to the Debugger section, and from there is is the same process.
Related
We have a place where there are multiple href links that take you to different page numbers in the same PDF document, like so:
href="https://url.website.fake/files/2021-01/documents/a_pdf_file.pdf#page=39"
The tester reports that sometimes if they click on link A and then link B, where both links are like the one above but going to different page numbers, the second click will take you to the page number from the previous link.
I've been trying to reproduce but can never do it. The tester is able to reproduce fairly easily. Does this sound like anything anyone here has experienced? Tester has only been able to reproduce this in Edge. Thanks.
All browser users are different, so too may be their PDF extension, thus in this case seems they may not have adjusted their Edge viewer use to same as yours. Other browsers have different methods but effect can be the same. You need to educate users to change their browser security.
Check the second setting.
Most likely theirs is On and yours is Off
its included in how to handle site response such as the download to view.
Using a simple two page file attempting to swap href Sometimes (but not always) throws me a warning
so asking for page 1, I see page 2
if I switch it off and refresh I will see Page 1
For web secure use it is best set On, however for local personal use I tend to switch it Off. Most other users would possibly prefer it On to continue at the page where they last read up to.
My MWE which shows above behavior is
<html><head></head>
<body>
link A (page 2)<p>
link B (Page 1)
</body></html>
link A (page 2)
link B (Page 1)
By using Google Chrome's inspect element, I can see image dimensions easily. like it is explained in Google's website.
But I want to know the image file size too (size, like 50kb). I know that I can first download and then look at the image file size on my computer, but I don't think it is the best way.
I want to know if I can find out about image file size in Chrome's inspect elements.
You can either find the file in sources or network tab.
For example, I inspect your avatar and see this url:
https://lh6.googleusercontent.com/-6jIAe62Q10s/AAAAAAAAAAI/AAAAAAAAABw/kRBVixTmLmk/photo.jpg?sz=128
I can look it up in the sources tab by finding the appropriate domain. The file size is listed at the bottom, under the preview.
The sizes are also displayed in the network tab but it has to be open before the image loads, otherwise it doesn't capture. Here it is filtered to show only images:
I have an image gallery composed of individual albums. All files and images are loaded to the site via single function which just loops through the files passed from the form via a standard html , so every file is loaded in the same way but just put in an appropriate folder.
The gallery was working fine until last night when 4 images loaded to one album would not display. This was traced to file permissions where the server suddenly assigned 600 rather than 644 (no permission assignments are made in the load function or anywhere else). Correcting the permissions resulted in the images displaying. However it was then found that a number of images in other albums were not displaying, whereas they had before. There were no issues with permissions.
Gallery page from Edge Chromium
So in the album page, the first album has a broken link and the second and third are OK, the forth is broken. The display is generated from a loop going through a table of the album metadata and picking up an image at random to display for each album. For the first two albums on the page the html from looking at the page source is,
<div >
<a href="media.php?mode=grid&album=18&activity_id=17">
<img src="media/A18-uke.JPG" width="210px" height="140px">
</a>
Altered Images - Cheryll Yeowell
</div>
<div >
<a href="media.php?mode=grid&album=17&activity_id=17">
<img src="media/A17-IMG_0322_edited-1a.jpg" width="210px" height="140px">
</a>
Chihuly at Kew - Liz Strange
</div>
If I look at the files in the media folder, both the image files are in there and from Filezilla I can view them, so the images are valid. The Filezilla folder listing shows both files the same as in the html above.
Filezilla listing of image files
The file names are the same as in the html above and both have permissions of 644; one is displaying and one not.
Out of interest I then looked at the page in Firefox and Chrome. None of the images displayed in those browsers.
Everything was working fine 3 days ago. No changes to scripts. Today, in Edge, some albums are fine, some only partially work, some not at all. Move to Chrome and Firefox and nothing now works. It's not involved html and, since it is all done in loops, every image is subject to the same code. One user has said that if there are some images showing and then the page is refreshed, all the image links display as broken, but I have not been able to replicate that.
I would welcome another set of eyes to either tell me what the silly mistake is or some inspiration as to what might be causing this apparent illogical behaviour.
Many thanks.
This is totally crazy - I am on my laptop and went to try the gallery on Edge, Firefox and Chrome and it all works perfectly. I haven't had any updates on close down over the past two days on my laptop or desktop and I've just checked the update logs and that doesn't show any. Since originally posting this I've had some more reports of problems from users. How can a facility be so apparently random in its working?
Just to make it more bizarre, today everything is back to normal. I haven't touched the code and all is back to how it should be. What would cause a set of image links to be broken (no other links on the site were broken to my knowledge) in a random fashion for 24 hours and then revert to being OK?
I made a small "project" using AngularJS. I created a directive to transform some string patterns in links. I use the javascript file in some html files. One of the patterns I want to "linkify" is "//www.google.com". I open the html files with Firefox or Edge. The indicated link looks different in each situation. When I inspect the element, I see in each situation:
//www.google.com
But when I hoover the mouse in browser over the link, I see in the lower left corner of the browser:
in case of one html page in Firefox: www.google.com
in case of another html page in Firefox: file:///
in Edge, both pages: file://www.google.com/
Of course, when I try to open the link by clicking on it in browser, I am taken to the same "address" which I see when I hoover the mouse over the link. What I need is the variant:
www.google.com
I don't actually care in this stage of the project whether is a correct or valid web address.
Why this different behavior?
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.