CODEWITHSUNDEEP
angulargoogle-chromeangular-cli
ske
ske

Reputation: 5234

Cannot load a local image?Angular or Chrome issue?

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}}' />

enter image description here

enter image description here

Upvotes: 1

Views: 2164

Answers (3)

ske
ske

Reputation: 5234

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");
    }

Upvotes: 0

Cat ninja
Cat ninja

Reputation: 140

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"
     ],
     ...
    }
],

Upvotes: 1

Rahi.Shah
Rahi.Shah

Reputation: 1313

Try to change src to ng-src like

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

Upvotes: 0

Related Questions