I have an image :
<img id="img1" src="http://igyaan.in/wp-content/uploads/2013/03/Nvidia-580x362.jpg" />
The image from the url is getting cached, but image is not getting displayed.
I analysed it using firebug, where I could see a GET request to the image, and image is returned. And in addition, there is a request to some facebook pic which I never requested (firebug: Bad request):
http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc7/424831_319096764809781_1948053300_n.jpg
jsFiddle: http://jsfiddle.net/Qb6YX/5/
Any idea why this is happening? And how do i solve this issue?
MoreInfo : iam working on a Rss feed reader , it displays images of posts . I had trouble with this specific website.
It is likely that the image is hotlink-protected. That's why it gets redirected when you try to load it on your page. In this case you should use a server-side proxy to retrieve the image and load it from there.
Using an external service from Images.weserv.nl:
<img src="http://images.weserv.nl/?url=igyaan.in/wp-content/uploads/2013/03/Nvidia-580x362.jpg" />
See jsFiddle
It would be better if you host the proxy script on your server for this purpose so that you have fewer dependencies for your RSS feed reader.
However, there are times when we should respect the site owner's decision of hotlink protection. One way to go about it is to replace an image that cannot be loaded with a default one.
Related
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.
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.
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.
I'm using email tracking services of some email sender company. It is achieved through requesting img resource when opening email. Here is the code inserted into HTML message:
<img src="https://ci4.googleusercontent.com/proxy/TObr7aARe70s=s0-d-e1-ft#http://www.mywebsite.com/TrackEmail?j=eyJ1IjoiMQ4In0%3D&r=0.614693022798747.gif" width="2" height="1">
I'm interested in how eventually the request will come to my website and what exactly will be requested from my website - image or simple request? Can anyone please explain me? I think the magic is somewhere in this part ...d-e1-ft#htt....
You can add a tag with an src pointing to a script on your website that handles te request, get the information you wanna track and returns an invisible image (1x1 transparent pixel for example).
Be careful with the googleusercontent cache servers, they can break your tracking, take a look at this:
http://www.emailmarketingtipps.de/2013/12/07/gmails-image-caching-affects-email-marketing-heal-opens-tracking/
This explains how to avoid caching using P3P headers and returning a Content-Type different to image/*
Just wondering how does Flickr prevent people from downloading images from its site? What are they using?
Transparent .gif over the image. You can still download the actual image by viewing the HTML source and finding the image's actual URL.
For example, a random image:
http://www.flickr.com/photos/34285128#N00/4300352607/
<img style="position:absolute;top:0px;left:0px;display:block" src="http://l.yimg.com/g/images/spaceball.gif" alt="" width="500" height="366">
That's the transparent image on top.
<img src="http://farm5.static.flickr.com/4057/4300352607_edcc5a4a9e.jpg" alt="Say It With Flowers by *sido* (back in a few days)." title="" width="500" height="366" class="reflect">
That's the actual image, which is displayed below spaceball.gif.
Not to thread dump, but conceptually if you are really trying to lock out downloading an image, you could (i think). Using a framework like asp.net mvc, you could tag the image with a unique key, storing the key either in memory or some other form of persistence and pass it down to the client with the id as the filename. On the returning end, upon request for the file, you could intercept the request for the image and perform a lookup on the key matching it to the actual file. Once you have the file, you return the image as a custom result with the appropriate meta tags (at least in mvc, not sure how you'd do it elsewhere). Before you return it though, you flag the result as being viewed.
It would be a great deal of work on the server, but it would require a great deal of effort for anyone to snag the image if you utilized Flickr's transparent gif technique in conjunction with it.
The idea being that a single request would be issued on a normal view and any further attempts to view the image directly (by viewing source and grabbing the url) would be blocked.
<./threadump>
Sorry, just had the idea and wanted to add it to the already answered question (sleep deprevation and all that jazz).