Angular - Dynamically loading an image

Question

I've searched all over StackOverflow but I haven't been able to find a solution to my problem.

F.Y.I I'm using ASP.net Core 2.0's default angular project

I'm currently building an Angular application where I'm trying to load in a customer's logo based on a config found elsewhere.

I'm trying to load this file into my home.component.html

I created a "CustomerService" which has a function getLogo() which in itself returns the customer's logo's path.

My folder structure is as follows: FOLDER STRUCTURE IMAGE
The assets folder holds the images, and the HTML found below is found in home.component.html

I know that "../../" isn't the way to go, so my first question is how I'd be able to fix that.

I've created the following HTML structure:

<img src="../../assets/timeblockr-logo.png" />
<img [src]="customerservice.getLogo()" />

And the CustomerService's getLogo function returns the following:

getLogo() {
    return "../../assets/timeblockr-logo.png";
}

EDIT: FOUND THE SOLUTION!!!

Turns out I had to use:

getLogo(): string{
    return require("../assets/timeblockr-logo.png");
}

Special thanks to @Niladri for the solution to this issue!

You may want to take a look at [this](https://stackoverflow.com/questions/12196435/javascript-function-return-src-path). — holydragon, Apr 10 '18 at 09:51
Where is your index.html file located ? the path of the image is relative to the location of index.html inside dist folder if you have added it to angular-cli.json — Niladri, Apr 10 '18 at 10:01
@Niladri My index.cshtml file is located in the **Views/home** folder — Rick - HashtagNetwork, Apr 10 '18 at 10:03
@Niladri, Yes I am, as stated in the beginning of the post and also in the tags :) — Rick - HashtagNetwork, Apr 10 '18 at 10:27
@Rick-HashtagNetwork what is the current path of image being displayed in html? can you share your webpack.config.* js files including the vendor — Niladri, Apr 10 '18 at 10:34
@Niladri Regarding the path to the images, it shows **dist/a0eeffbba7398daebf178f3d7fab50eb.png** I'll add the web pack config files to the post. — Rick - HashtagNetwork, Apr 10 '18 at 11:03
@Rick-HashtagNetwork do you have that image in dist folder after build ? did you check it? — Niladri, Apr 10 '18 at 11:05
@Niladri Yup, but only when using both image tags. The first one works, and gets added to the dist folder. But the second img tag doesn't get the updated src from webpack. — Rick - HashtagNetwork, Apr 10 '18 at 11:06
@Rick-HashtagNetwork in ts file update the URL as this inside getLogo method `const ImageUrl:string = require("../../assets/timeblockr-logo.png"); return ImageUrl;` — Niladri, Apr 10 '18 at 11:19
@Niladri Result of that: **Error: Cannot find module "../../assets/timeblockr-logo.png"** — Rick - HashtagNetwork, Apr 10 '18 at 11:38
@Niladri Changed the structure to **require("../assets/timeblockr-logo.png")** and it works THANKS! — Rick - HashtagNetwork, Apr 10 '18 at 11:49
@Rick-HashtagNetwork great should I post this as answer with explanation? — Niladri, Apr 10 '18 at 11:50

FAISAL · Answer 1 · 2018-04-10T10:02:45.710

5

Your image source should be without ../../. The image paths are relative in the output folder. Just change to this:

<img src="assets/timeblockr-logo.png" />
<img [src]="customerservice.getLogo()" />

And your function should be:

getLogo(): string {
    return "assets/timeblockr-logo.png";
}

As per your comments, you need to change your "assets" entry in .angular-cli.json to this:

"assets": [
    "assets",
    "favicon.ico",
    { 
        "glob": "**/*", 
        "input": "./assets/images/", 
        "output": "./assets/images/", 
        "allowOutsideOutDir": false 
    }
],

edited Apr 10 '18 at 10:02

answered Apr 10 '18 at 09:50

FAISAL

33,618
10
97
105

This results in **localhost:56982/assets/timeblockr-logo.png 404 (Not Found**) it seems like webpack doesn't update this url. because I also added the other image include (which does work) and it's SRC is changed to **dist/a0eeffbba7398daebf178f3d7fab50eb.png** – Rick - HashtagNetwork Apr 10 '18 at 09:53
@Rick-HashtagNetwork can you post your folder structure? are you using angular-cli? – Niladri Apr 10 '18 at 09:54
Hey @Niladri , Folder structure is already in the post ;) I'm using ASP.net Core's default angular project. – Rick - HashtagNetwork Apr 10 '18 at 09:54
@Rick-HashtagNetwork can you post your angular-cli.json file – Niladri Apr 10 '18 at 09:56
@Niladri added to the post! :) – Rick - HashtagNetwork Apr 10 '18 at 09:57
@Faisal Unfortunately, this didn't do anything. – Rick - HashtagNetwork Apr 10 '18 at 10:05
@Faisal I copy and pasted all of your changes, including the string indication etc. But I'm still getting errors: [SCREENSHOT](https://imgur.com/a/TsjX8) – Rick - HashtagNetwork Apr 10 '18 at 10:18
@Faisal Also in this manner, the previously working image include isn't working anymore. – Rick - HashtagNetwork Apr 10 '18 at 11:12

score 2 · Accepted Answer · answered Apr 10 '18 at 12:03

Webpack uses url-loader to load images from your angular project that comes with extension .png,.jpg etc . Take a look at the below code from the url-loader repo in github https://github.com/webpack-contrib/url-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

it looks for image files with the above extensions. But we need to use require statement to the actual image path for the Webpack to understand the path of the image so that it can pick them up. This is required in .ts / typescript files while using the path of the image as a variable or returning the path value from a method . The first image tag

<img src="../../assets/timeblockr-logo.png" /> was working because Webpack uses html-loader for .html files, which automatically replaces src attribute values on image tags with the bundled image URL.

So your getLogo() method should be like below

getLogo():string {
    return require("../assets/timeblockr-logo.png");
}

score 1 · Answer 3 · answered Apr 10 '18 at 09:43

1

Change <img [src]="customerservice.getLogo()" />

To <img [attr.src]="customerservice.getLogo()" />

Angular - Dynamically loading an image

I've searched all over StackOverflow but I haven't been able to find a solution to my problem.

F.Y.I I'm using ASP.net Core 2.0's default angular project

** EDIT: FOUND THE SOLUTION!!! **

3 Answers3

EDIT: FOUND THE SOLUTION!!!