Require and load images dynamically #362

New Issue

fergalmoran · 2025-08-09T17:16:00Z

fergalmoran commented

2025-08-09 17:16:00 +00:00

Originally created by @azexpert on 10/14/2017

Hi Team,

I've got a large list of images to load dynamically

In component:
export class CardComponent { @Input() card: Card; }

In html I want to do something like:
<img class="card-img-top" [src]="getUrl(card.imagePath)">

Card objects are loaded at request from a web api so the path is unknown upfront.

I looked at the #552 but there all references are to static image paths. Those you can get webpack to load with require(). However you cannot do require( 'this.gets.value.at.runtime' ).

What is the best and lightweight approach to load the images dynamically? How is it done with Webpack or should the Webpack be dropped altogether and the images be served from the wwwroot?

Please advise. Ta!

*Originally created by @azexpert on 10/14/2017* Hi Team, I've got a large list of images to load dynamically In component: ` export class CardComponent { @Input() card: Card; } ` In html I want to do something like: ` <img class="card-img-top" [src]="getUrl(card.imagePath)"> ` Card objects are loaded at request from a web api so the path is unknown upfront. I looked at the #552 but there all references are to static image paths. Those you can get webpack to load with require(). However you cannot do require( 'this.gets.value.at.runtime' ). What is the best and lightweight approach to load the images dynamically? How is it done with Webpack or should the Webpack be dropped altogether and the images be served from the wwwroot? Please advise. Ta!

fergalmoran closed this issue

2025-08-09 17:16:00 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#362