I am doing a project, where I need to show an image on html page. The image is located in a network drive. Using the below tag to refer to the image, I receive a "Not allowed to load local resource:" error.
<img src="file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png" alt="Image">
If I however, open a new tab in the same Edge web browser, and copy the file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png into the address bar, the image is displayed inside the web browser. I have tried with Google Chrome in stead of Microsoft Edge and turned off the security feature, but still get the same error.
Additional information.
The HTML page was rendered using Django as backend. In my Django template I have.
<img src="file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png" alt="Image">
Could an alternative approach be that the front end is doing a request to the backend that then fetches the image, and put it somewhere that can be reached from front end?
For my project, the solution I ended up using was for my frontend to send a request to the backend. The backend then fetches the image, and send it as a blob to the frontend. I know that setting up a webserver is another possibility, but in this case my Django backend already acts as a webserver.
Related
I have a classic app with spring boot as backend and Angular as Frontend. In the app there is a button to upload an image, this image is saved somewhere in the backend, and the relative path to that image is saved in the db as e.g. "uploads/image.jpeg".
I want to interpolate the src attribute of the <img> tag to access those specific files on my server file system. whenever I do that, that path gets converted into "localhost/4200/uploads/image.jpg" and issued as a get request.
However, if the src attribute is not interpolated it access the normal file without any problems. Only when interpolated does it issue a get request
Angular part:
<img class="img-responsive custom-img" src={{article.imageUrl}} referrerpolicy="no-referrer">
basically article.imageUrl = "uploads/image.jpeg", why does it get http://localhost/4200 appended to it ?
Error:
GET http://localhost:4200/uploads/image.jpeg 404 (Not Found)
I want to disable this behaviour.
If you want to access the image dynamically on the client side, there must be a get request for that image.
To load the image without a get request, reload the whole page after a user uploads an image, thus sending a get request for the whole page and not just the image. Now on the server side add the image to the DOM using the local path, and send back the whole hardcoded page to the client.
I have a page that is constructed by GWT, when the page get loaded, I will display some required content in it. And then if user click a certain button on the page, I will send request to server side and server will return me a HTML file(a chart generated by jquery plotting tool) stored in local directory, I need to display this HTML file into the existing GWT page's certain widget.
I tried to use Frame in GWT to link to the local HTML file and display it, it get failed, googled and found it's because of browser security setting.Please share your thought, any idea is appreciated.
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've an app, which loads data from database. In a table I'm storing some URLs EX: https://facebook.com. Remember these URLs are dynamic and are controlled in admin panel.
Now, I need to get contents of these URLs and display it inside iFrame or inside a div within my app. Idea here is user should not go away from my app.
When I tried to load https://facebook.com it never loads because they've (X-Frame-Options) enabled.
Is there any solution for this?
You cannot tell the browser to ignore the security instructions provided by the third party site. That would defeat the object of having them in the first place.
If you want to display the content on your site, then you will have to display it from your own server (e.g. by using a server side process to read the data from the third party site and serve it from your own). Obviously, this will mean that you cannot (for example) load Facebook using the user's own credentials.
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.