I am trying to run an image gallery viewer. It currently works as expected in Google Chrome.
I have moved it to a windows phone to test the mobile Edge browser. The HTML, CSS and JavaScript all appear to be functioning but the img tags appear to be having some problems and aren't loading.
I have browsed the official Microsoft Forums regarding Edge etc. and can't find anything related to this issue.
Then simplified the code, and gives same error, that img tags dont show the actual img.
<html>
<head></head>
<body>
<img src='p0.jpg'>
<p></p>
<script>
document.querySelector('p').textContent = document.querySelector('img').src
</script>
</body>
</html>
When I view it in the browser, I see a small "broken image" icon in the far left corner, under:
file:///C:/Data/Users/Public/Documents/Gallery/pictures/p0.jpg
How do I show it in local (mobile) reference? Is there a problem with the image file? And how should I test websites for overall user experience as though I was a mobile viewer?
After some extensive testing myself trying to get the image to fail on load, I can't yet find a problem with it. Because of my lack of results, I have a feeling that the only possible problem would be that your image is either not copied over either, or that you're placing it in the wrong directory. It's often best practise to have a img folder to store all of your images in, and then you can move the entire file across. All I can recommend is that your image file is in the correct location that you're referencing (in this case, the same folder as your HTML file).
Another potential solution would be to try referencing images that are hosted online (do a Google search for something and then copy paste the full URL). Make sure it works on Desktop first and then try it on mobile. If it works, great - your problem is related to your own hosted image file / location. If it doesn't work, it may be worth delving slightly deeper and figuring out what's wrong with the device / browser.
Sorry this isn't a very useful answer, but I hope it helps you in some way
Related
This is a really weird bug that has already consumed half of my day.
I am creating a chrome extension and when developing the extension locally it looks fine (like I want it to look).
However, once I load the extension to chrome to test performance the UI looks a lot smaller.
I made sure both windows are at 100% size.
What is weird is that actual values change. Font that should be 16px in development becomes 12px in "production".
I have attached 2 screenshots:
DEVELOPMENT (How it is meant to look):
PRODUCTION (How Chrome renders it, once the extension is uploaded):
There you can clearly see the changes in font size and UI. Is this a known Chrome bug or something?
Any help or hint is appreciated since I feel kind of stuck!
Thanks!
maybe the answer of this thread could help you:
LINK
Seeing the images you attached, I can only assume that an ancestor tag (it could be the button or an even more ancestor element) uses a font size that conflicts with your "font-light" class declared 16px.
If by "testing locally" you mean opening the html page with chrome outside of a loaded unpackaged extension, then accept my advice to review your method.
The same html + css combo loaded in Firefox (almost certainly) would give an even different result.
It is also possible that the issue\solution lies somewhere else, but the concepts just outlined need to be taken into consideration.
Whenever I upload an image to my website, it makes the image a little larger than the original file has it at, plus the quality goes down as if it's zooming in or something. I tell it in the html code what the correct image size is like this:
img src="_images/podcast/120913_slider.png" width="851" height="323" alt="News1"
So the correct sizing should show, I'm not trying to change the dimensions or anything in the code. When I save the file and look at the picture, everything looks alright. But once it's in the site, it changes and I can't figure out why.
Here are two pages I'm currently working on where I see this. In the news slider on the main page, it's very clear that quality has been lost for the Christmas Novella news picture, which is obviously a problem for me.
http://thehummingbirdplace.com/
http://thehummingbirdplace.com/episode/12/9.html
I've also tried downloading the image again from the site (the "save image as" option) but it looks the same as the original image I had (smaller and high quality), so I don't understand why it displays differently on the page. I'm using Firefox, and I definitely do not have the page zoomed in or anything, I've checked. And I don't see this happening on other websites I visit, just mine, and on multiple computers, so I know there is something I must be doing wrong in the code?
I'm sorry if there is an obvious solution to this, thank you for helping!!
Update: the images show up fine in Chrome, just not Firefox it seems
According to your link, the image on the website is exactly the image that is linked (and not resized), I can't see any difference between those. Are you sure you are exporting your images at this resolution: 851x323 ?
I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.
I want the visitor to see the loading GIF as soon as he enters the website, until the the website has completely loaded and ready to go.
HTML:
<img id = "firstLoadedImage" border="0" alt="title" src="Pictures/loading.gif" />
There is no CSS associated with this.
And I loaded every other image through my javascript document.ready call. This is the only occurance of declaring an image in HTML or CSS, beacuse I know that all the images are loaded together if I do that, but I only want this gif to load first.
But the problem still exists where in CHROME only, that there is a very noticeable delay before my gif image actually loads and starts to animate. I've extensively researched this and found the best matching solution, yet I tried their ways to find that it's somewhat a slightly different case from mine. - Loading GIF (Preloader) gets stuck only on Chrome -
The difference being that I'm using the GIF before the entire web page finished loading. I've tried dataURI with base64 already. It didn't work for me, as the same reasons from #amiregelz OP stated in his comments. So the only other solution is deleting the delcaration:
background-attachment: fixed;
But the only problem is that I never even used that code anywhere. So I guess the problem is now, what should I try next.
Any help from Guru's would be highly appreciated. Thanks in advance.
This issue should be fixed now in the newer versions of chrome.
I want to reproduce the live camera feed from http://www.falakrotop.meteodrama.gr/webcam.php. I want to display a resized (200x150) image of the live feed camera image on this website. Using iframe caused scrollbars to appear, making hard to see the (huge) image in a small 200x150 box. Is there a way to only take the live image, resize it and display it on my website (and also refreshing live)? I cannot use iframe to only use the image, as it seems to be dynamically generated...
The webcam seems to be offline now, but have you tried this?
<img src="http://www.falakrotop.meteodrama.gr/tincam1.jpg" />
If that doesn't work, you could try scraping it using fsockopen.
You will get the full page then, and after that, use preg_match to get to the image.
I would also highly recommend clearing it with the webmaster / owner of the site. You would be sending a lot of requests to his/hers website.
You can find some good examples on the pages I linked to.
I hope this helps. Good luck!