Cannot load a local image?Angular or Chrome issue?

Question

I'm working on a page that displays a list of images. The Api returns a list of objects with a imgUri property that saves the image absolute path in a shared folder.

But when I use the angular/cli to run the app, the code is okay but in the chrome console, I see a lot of images are blocked by chrome or angular, I am not quite sure. I know maybe running it on a server that could avoid this issue.

So basically, how do you guys test this feature in the development.Shall I let the api return the image stream and display the image by the stream? Is it a good idea?

 <img width="118px" height="180px" src='{{book.imageUri}}' />

Chrome does not block image, errors seem throw by your link from api. Can you share your real json which api returned ? — Thien Hoang, Jun 16 '17 at 07:58
it's clear now, I think your image url made browser understand that image is local-file ( ref https://stackoverflow.com/questions/18246053/how-can-i-create-a-link-to-a-local-file-on-a-locally-run-web-page). You should change image with syntax as "sydymgp1/images/image.png". — Thien Hoang, Jun 16 '17 at 08:07
no @ThienHoang I tried different slashes but no one worked. I am guessing is it because of the Angular/cli user permission? So I can access these images/ this shared folder because i am a domain user that is granted access permission. But when the angular/cli runs, what user is it? — ske, Jun 16 '17 at 08:24
Image you show here just can be 2 types: one from server and other is internal project ( hosted by angular-cli). Your shared folder is also local-file, it is out of scope when browser show image as you can read my above link. Or do I misunderstand that you mean it's inside project ? — Thien Hoang, Jun 16 '17 at 08:28
@ThienHoang No it's not inside angular/cli. It's a independent image server inside the intranet. — ske, Jun 16 '17 at 08:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146841/discussion-between-thien-hoang-and-shanke). — Thien Hoang, Jun 16 '17 at 08:37

score 1 · Answer 1 · answered Jun 16 '17 at 08:33

If i'm correctly understanding your issue, you are using angular-cli and your use of the API is to get the images and then locally saving them in a shared folder but they don't get displayed, correct ?

Please check if your folder is located in the "assets" folder of your project.

If that's not the case, you can move your files in asset folder, or you'll have to add the folder path in the angular-cli.json file :

"apps": [
    {
     ...,
     "assets": [
         "assets",
         "your-folder", /* if it's on the same level as the assets folder */
         "favicon.ico"
     ],
     ...
    }
],

score 0 · Answer 2 · answered Jun 16 '17 at 08:01

0

Try to change src to ng-src like

<img width="118px" height="180px" ng-src='{{book.imageUri}}' />

answered Jun 16 '17 at 08:01

Rahi.Shah

1,305
11
20

compiler.es5.js:1689 Uncaught Error: Template parse errors: Can't bind to 'ng-src' since it isn't a known property of 'img'. ("ol-md-12">
]ng-src='{{book.imageUri}}' />
– ske Jun 16 '17 at 08:08
@Rahi.Shah The question is for angular2+ and even in angularJS it would be just ng-src="book.imageUri". no need for curly braces. – Dhyey Jun 16 '17 at 08:10
I think you mean – Zdenek Hatak Jun 16 '17 at 08:15
Yes, I mean – Rahi.Shah Jun 16 '17 at 08:18
Guys, no matter which way it's for generating the html code. And now it's okay with that. The problem is not the html but something that blocks the html page to present the images. – ske Jun 16 '17 at 08:22

score 0 · Answer 3 · answered Jun 16 '17 at 09:29

Thanks Guys! After wasting a lot of time, I am tired of seeking the reason.

I finally add a new HttpGet method on the WebApi to fix this issue.

    [HttpGet("{imgId}")]
    public IActionResult Get(string imgId)
    {
        var imageFilePath = $"{ImageFolder}{imgId}.jpg";
        var imageFileStream = System.IO.File.OpenRead(imageFilePath);
        return File(imageFileStream, "image/jpeg");
    }

Cannot load a local image?Angular or Chrome issue?

3 Answers3