Facebook debugger not updating image correctly - html

I'm using the debugger and scraping and scraping and scraping but the image won't update. It's grabbing the correct image URL in og:image when I debug it, and I've checked the URL and it goes to the correct image, but for some reason every single time the link preview is showing the old image.
Everything I've read just tells me to go to the debugger and rescrape it and it should just be voila! new image. Am I missing something?

Related

Image dissapears when HTML is sent via Internet

I have some HTML file with an <img src="..."></> tag inside. I can open the HTML and see the image just fine. But when I sent this HTML file to someone (by email, Skype, or whatever), even to me, the image is no longer there. The error I get when I open the HTML that I sent to myself is:
Failed to load resource: net::ERR_FILE_NOT_FOUND
What may be causing the problem? I thought of uploading the image somewhere on the Internet, so there will be no problem with finding it when I point to it with a url.
if the source of the image is on your computer and not using a url, then you will either need to upload the image source onto the web or email the image source to the recipient.
you also need to make sure to have the image source located in the correct location/directory

HTML image doesn't loud from GOOGLE CLOUD

I have minimal knowledge of coding but I just spent the past 6 hours trying to resolve this issue.
Go here to see the image I am trying to have load.
If I am suppose to chance the SRC lines, how and where do I do that?
The HTML image loads perfectly from my computer.
Like what #mlegg said, I get the same error when trying to go to your link. It looks like that is no longer a valid URL or there is some form of security on it so it's only accessible from your computer (since you said it works from your computer?).
It could also be getting pulled from your browser cache if it was a good URL at one time. Try doing a Shift + Refresh of the page or purposely clear your cache.
If you have the image locally you could try uploading to a different web based repository and src it from there.
Just to cover all bases, I trust you know how to put an image on a web page using the img tag:
<img src="http://lorempixel.com/400/200/">
You might also want to try a different image that you know is available and accessible. You can use the URL above for lorempixel.com or you can scrounge up a different image from a Google Images search.

Cannot create direct link to image hosted online

I was just trying to add a background image from http://wallpaperswide.com/rocky_peak-wallpapers.html to my website.
The link to the particular image is http://wallpaperswide.com/download/rocky_peak-wallpaper-1920x1080.jpg.
However, if I try to load the image from the second link, it doesn't load. If I paste the URL into my browser, it redirects me to the first link.
Why does this happen? Thanks.
Edit
I'm getting some answers that there is an HTTP redirect. I know I can download the file and use locally.
However, the problem is that I'm writing a script that dynamically takes an image from the wallpaperswide.com site and automatically getting the image that fits the person's screen resolution. I just scan the page for the links and try to use those links. I can't download every image from the site and have them locally...
Any suggestions?
Because http://wallpaperswide.com/download/rocky_peak-wallpaper-1920x1080.jpg is not an image, it's a document.
HTTP urls always point to documents, therefore the web server is able to process it and give you the appropriate result.
The website author has added a 302 redirect rule while accessing the links directly, so you can't embed that link directly. Instead, you can download and refer it.

Error When Loading Images on Local Host Test Server

I have a peculiar problem that I just can't seem to find an explanation.
I'm working on an AngularJS site for our family and am integrating data from various web services. Currently I am working on the photos section which will integrate in photos from our Flickr account.
I have a main page which lists the various photo sets and displays the set's primary photo along with the title. (Note: I'm using the Flickr 'extras' parameter to return the primary photo's URL in the API calls.)
<div data-ng-repeat="p in vm.photoSets">
<a ng-href="#/photos/{{p.id}}">
<img ng-src="{{p.primary_photo_extras.url_s}}"></img>
</a>
<h4>{{p.title._content}}</h4>
</div>
When clicking on the photo, the routing will display a page with a list of all the photos from that set, showing the image and the title.
<div data-ng-repeat="p in vm.photoSetData.photo">
<a ng-href="#/photos/{{vm.photoSetId}}/{{p.id}}"
<img ng-src="{{p.url_s}}"></img>
</a>
<h4>{{p.title}}</h4>
</div>
Now, here's where the problem is occuring. When I upload the code to my public website on my hosting provider, everything works just fine. Both pages display their respective photos. However, when I attempt to run the site on my local system, either in MAMP or NodeJS (using http-server), the second page gives me an error for each image:
Error: [$interpolate:interr] Can't interpolate: {{p.url_s}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: https://farm1.staticflickr.com/37/82749767_e82ff60ce3_m.jpg
http://errors.angularjs.org/1.2.9/$sce/insecurl?p0=https%3A%2F%2Ffarm1.staticflickr.com%2F37%2F82749767_e82ff60ce3_m.jpg
http://errors.angularjs.org/1.2.9/$interpolate/interr?p0=%7B%7Bp.url_s%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20Blocked%20loading%20resource%20from%20url%20not%20allowed%20by%20%24sceDelegate%20policy.%20%20URL%3A%20https%3A%2F%2Ffarm1.staticflickr.com%2F37%2F82749767_e82ff60ce3_m.jpg%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Ffarm1.staticflickr.com%252F37%252F82749767_e82ff60ce3_m.jpg
minErr/<#http://localhost/scripts/angular.js:78
$interpolate/fn#http://localhost/scripts/angular.js:8254
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://localhost/scripts/angular.js:11800
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://localhost/scripts/angular.js:12061
done#http://localhost/scripts/angular.js:7843
completeRequest#http://localhost/scripts/angular.js:8026
createHttpBackend/</jsonpDone<#http://localhost/scripts/angular.js:7942
jsonpReq/doneWrapper#http://localhost/scripts/angular.js:8039
jsonpReq/script.onerror#http://localhost/scripts/angular.js:8053
The API call to Flickr is successful and returns the correct data. In fact, the image title does display! I've tested it with Firefox, Safari and Chrome...all three browsers fail.
I cannot find any explanation as to why it would work remotely but fail locally. Also, the images show up on the first page, but not on the second, even though one of the images on the second page is the same image URL as on the first page. Even going directly to the second page, bypassing the first page, still fails.
Any ideas on how to fix this? It would be nice to test locally without having to upload to the server each time I make a change.
Update:
I have shut off the $sce security to see if that was causing the issue. Although it resulted in turning the error off, the files still don't load on the local test server. I have used the developer tools' network monitor and it doesn't even show an attempt to retrieve the files. AngularJS appears to shut down the retrieval, although the correct path shows up in the DOM.
Based on the symptoms, it just seemed that something was wrong with the second page. After looking through the DOM, I noticed something strange about the a and img tags. It seemed that the entire img tag was embedded into the a tag.
So, I went back to the html markup and noticed the missing closing bracket. The entire issue was caused by the a tag not being properly closed.
I'm still trying to understand the error that AngularJS was throwing and how it would relate to the incorrect markup.

Images not appearing in Facebook's share link tool

I am having an intermittent issue the Facebook share link function does not pull the the link image from the page. This is happening consistently intermittently, that is, it keeps happening but not for a consistent page, image, style, etc. I can't find any pattern. Pages won't work, and then they will. Most pages work fine at the first attempt, but maybe 5% fail.
Each time it happens I check the URL in the Facebook debug tool, and it finds the article image without problem. Often, after I use the debug tool and then try to share the link again the image is found by Facebook.
The site uses Open Graph tags that check out with the Facebook debug tool.
Here is one example page:
http://zujava.com/must-have-school-supplies
Are there other factors that impact whether an image is pulled along with a URL in Facebook?
Facebook scrapes your page every 24 hours. So on the initial go unless you like the page or send it through the debugger, the image (and other meta data) will not appear.
Read more at
http://developers.facebook.com/docs/reference/plugins/like/#scraperinfo and
How does Facebook Sharer select Images?