I'm populating a page with images. Each one comes from an external url (imdb). But there is a set of images that are not loading, appearing as a broken link. All url's of such images include an '#':
<img src="http://ia.media-imdb.com/images/M/MV5BMjQyODg5Njc4N15BMl5BanBnXkFtZTgwMzExMjE3NzE#._V1_SX300.jpg" class="sf-img" style="opacity: 1;">
Oddly enough, when testing it locally (localhost) the images load without issue. But when I upload it to my server and test it, then the images appear as missing.
I'm kinda lost here. I'm not sure if the '#' is causing this or not.
The rest of the images load correctly.
Found the issue: The real problem was with the permissions from the requested server. I got 403 response when trying to include the image from within my page from my server. Its apparently a security measure from IMDB.
I got to the solution for this following these past questions:
I get a 403 error when inserting an image tag into my website
Getting 403 forbidden when dynamically loading images in AngularJS
Related
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
So I seem to be having a strange problem. When I open up my HTML pages locally, everything shows up and everything works. However, once I uploaded them to the server for my website only two of the images show up.
All of my images are in the same folder as all of my HTML pages and there are still a few images that work. Is this an issue with my image paths? Or is it something with my host since some of the images will load?
Here is the URL for my webpage: clepert.jomc-class.org
Must be a problem with images path since there a not on the server at the path that you wrote.
Maybe you didn't put them on the server or there has been a problem during the transfer. Check if they are on the server.
I got this for your background: Failed to load resource: the server responded with a status of 404 (Not Found). http://clepert.jomc-class.org/bckgrnd.jpg
So I would check for this file specifically on your server.
Otherwise your logo is a white image on a white background... so it won't show without a colored background.
The easiest way to solve such things is to check the browsers Developer-Tools and take a look at the console or network section (different from browser to browser).
You're getting an 404-Error so maybe the path is wrong, or the image is just not on your server.
Just because the browser gets a 404 back doesn't mean the file isn't there. It might be that the user / server doesn't have permission to access the file (not everyone uses the 401 status code).
Check the logs! They will save you LOTS of time.
Check the permissions of the directory and all other files you're
trying to access.
Make sure your paths are correct (local vs absolute, etc).
Post more details if that doesn't help.
Check the logs again.
I have a website that has many thumbnail images on it with links to bigger images for each one.
These fullsize images work offline, but when I upload them to the server they will just keep loading.
If I attempt to see the image directly it gives me a 404 error.
This is the website here: www.weissidian.com
What the image looks like when i attempt to go to it:
I'm not sure why it would be doing this.
Thanks before hand.
It looks like you didn't specify the URL correctly. The URLs are case-sentitive on your server and are case-insensitive on your computer.
For instance with http://weissidian.com/core/img/gallery/fullsize/digital/Shepard.jpg you are linking to the directory digital which doesn't exists. (I guessed because there is no Forbidden message.) When I try Digital (notice the uppercase D) it works fine.
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 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.