I have an odd problem with my angular application. Its logo loads properly at first with 200 status code but then after some time when the page is inactive, it repeats calling for the image and gets 304 status with no content which results in blank space replacing my app logo.
This is the HTML piece of code responsible for the logo and there's nothing special to it so my guess would be some configuration of angular
<img src="images/example_image.svg" alt="Example Logo" class="logo-image">
In the navigation component, there's nothing more that refers to this piece of the template.
I'll be glad for sharing if you have faced a similar issue or is aware of a mechanism that might be causing this behavior
Related
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 have my images as links, I put them in the 'img' tag in the 'source="https://i.imgur.com/ABCDEF..."' space. My issue is, that if I don't open each link first, they don't load.
I don't really know what to try, the way I wrote the code works, only that i have to open each link first.
Links are in a JSON structure in github, I'm putting that info in my html via javascript
<ul id="galleryUl">
<h1 class="tracking-in-expand-fwd" id="h1Name">ANGELA & VALENTINA</h1>
<img src="https://i.imgur.com/ZOHGX1Z.jpg">
<img src="https://i.imgur.com/AWOW84K.jpg">
<img src="https://i.imgur.com/xXZYJjF.jpg">
<img src="https://i.imgur.com/mQhqGIG.jpg">
<img src="https://i.imgur.com/PfzJb37.jpg">
</ul>
It works here, but not in my page
screenshot of the problem
Errors 401 and 403 are authorization errors, and usually it means that the content is stored in an area that the user needs to be logged into/ that they have no access to. From the path shown in the screenshot, however, it looks as though the images are being called incorrectly from the local host. If the https:// part of the url is missing in your code that creates the image url, correct that first and try again, as without it. [Otherwise the code is expecting the images to be stored on your local machine.]
Hope this helps
I am working on angular 4 along with node and MySQL. I have saved my image .SVG in blob form but when i getting it back from API it is not able to get rendered on my browser. When i inspect it is showing me <img src="unsafe : asd......."> and when i remove unsafe then it is showing me the actual image. I am stuck on this problem.
Help Needed.
<img src="data:{{asd.asd_logo_type}};base64,{{ico.ico_logo}}" alt="...">
unsafe keyword is automatically gets added image base64 string
I am wondering if someone can help me with a problem I am encountering with iPhone/iPad. I have an email the generates a report as an HTML attachment. In that HTML attachment, there are two images. One is a static image that pulls down a logo using a normal HTML img tag.
The other is dynamic. It also uses the normal HTML img tag, however it calls out to a web api with some information identifying the user.
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm}" >
The Web API uses information on the user to return appropriate images to them. For some reason the dynamic image does not show up with the attachment is opened on an iPad/iPhone.
The image works just fine when the attachment is opened from a computer. I thought maybe something might be blocking images, however then I would expect the static image not to display as well. I verified that the "Load Remote Images" setting is turned on.
I am at a loss here. Is there something with iOS that prevents dynamically generated images from showing in HTML attachments?
Thanks
Ok, I can't explain why the above is not working, but I did find something that does. Instead of using the following URL
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm}" >
use
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm.jpg}/" >
The final param needs to end with ".jpg/". If the slash is not there, you will get a 404 error.
Then in the API method, you simply strip off the .jpg part of "OtherParm" to get the intended value for "OtherParm".
I am having trouble getting the proper image to show up when I a link to my website in a status update. It is either grabbing an image from the front page which I don't want it to use (links to the front page) or no image at all (links to specific pages).
I found several tutorials that all gave the same advice about using a meta tag to specify which image to use, which I have done. Example Tutorial. Example:
<link rel="image_src" href="http://URL-TO-IMAGE" />
This had no effect. The article mentions that Facebook caches these lookups and provided a link to a URL Debugger, which was supposed to scrub that cache for me. I used it to verify that my meta tag was inserted properly (it was), but it had no effect on new status updates. Am I missing something? The way the tutorials talk gives me the indication that using this debugger will clear the Facebook cache for the page so that the next lookup will load and re-cache the proper image. Instead it seems that all this does is bypass the cache this one time for the purposes of testing.
Is there a way to actually force clear this cache, or do I just need to wait? It's been several days. How long does this cache take to expire?
Steps to Reproduce:
Visit Facebook News Feed or Timeline
Enter URL of my website in status update (can provide if neeeded)
Expected Outcome
The Favicon of my website is loaded as the icon for the status update
Actual Outcome
An image of a person (appears in the sidebar of our site) is used as the icon (for links to the front page. Links to the inner pages of the website load no icon at all.)
Further:
Visit the URL Debugger
Enter URL for website
Verify proper icon is loading
Post link in new status update.
Expected Outcome
FB's cache will be updated and the Favicon will now be used.
Actual Outcome
Nope... still the person from the sidebar on front page links and no icon at all for inner page links.
UPDATE 2/22/2013:
The image that loads when I post my URL to Facebook has changed! But it's still wrong :(.
I went to test it this morning and I now have an additional image as an option, which means Facebook did update what it's loading from the site, but it's still not the image that I specified in my tag. It's just grabbing another image from one of my other side bars, and I'm still not getting an image at all for my inner page.
It's weird.... the URL Debugger tool grabs the correct image, so I don't think the problem is my Meta tags. That's what the URL Debugger is supposed to help me identify. I think there's some disconnect between the lookup and what Facebook actually posts. I think this is a problem with Facebook, unless I'm missing something huge, but I don't see it....
UPDATE 2/25/2013:
I've made progress, but there's still something weird going on. Martey set me straight on the using the og: meta tags rather than just the tag. The tutorial I had been following said to ignore the Open Graph warnings, but once I started paying attention to them, I got some good information. Like, it actually said that my image is too small and that it will use another image instead. Guess I should have paid attention :)
Anyway, so the issue was that the favicon is too small. According to the Open Graph warning, it needs to be 200 pixels in both directions. So I grabbed the actual header logo and tried to use that. It's 340 pixels wide. Oops, it was only 164 pixels tall.
So I used The GIMP to set it onto a transparent background that was 200 pixels tall and tried again, but it's still telling me it's too small. It's no longer telling me that it needs to be 200 pixels. It just says that it's too small.
I'm stumped again...
Update 2/25/2013: Issue Resolved
The problem was transparency. I filled the background in white and tried again and now it's loading fine.
Thanks for your help, Martey!
Instead of using a third party tutorial, you should refer to Facebook's official OpenGraph documentation. They recommend using an og:image metatag to refer to document images.
As I noted in my comment, issues with data not updating on Facebook is likely to be the result of misformatted or wrong OpenGraph metatags. Without the URL of the troublesome page, or information on the URL Debugger's warnings, it is difficult to recommend solutions.