How to load images from dynamic src in angular2 and webpack?

Question

I'm using angular2 and webpack2 in my project.

My co-workers start the project from Angular2 QuickStart, and then I move it to Webpack environment.

I use html-loader to load components templats and use url-loader to extract images and fonts:

{
    test: /\.html$/,
    loader: 'html-loader'
},
{
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
    use: 'url-loader?limit=1000&name=assets/[name].[hash].[ext]'
},

The templates are like this:

<section class="creation-mobile">
    <img src="../../../images/camera/cn/mobile/creation.jpg" alt="" class="img-cn">
    <img src="../../../images/camera/en/mobile/creation.jpg" alt="" class="img-en">
</section>

When I build it, Webpack can find the images and export them into asstes/.

It works fine until I meet templates like this:

<li *ngFor="let i of [1,2,3]" class="item{{i}} m1-view">
    <div class="{{lang}}-video-view">
        <img src="../../../images/os/{{lang}}/medium/one-step{{i}}{{deviceRatio == 1?'':'@2x'}}.jpg">
        <video class="video-medium" preload="auto" src="../../../videos/os/{{lang}}/medium/one-step-{{i}}{{deviceRatio == 1?'':'@2x'}}.mp4" [video-play]="onestepVideoState[i-1]"></video>
        <img src="../../../images/os/{{lang}}/large/one-step{{i}}{{deviceRatio == 1?'':'@2x'}}.jpg">
        <video class="video-large" preload="auto" src="../../../videos/os/{{lang}}/large/one-step-{{i}}{{deviceRatio == 1?'':'@2x'}}.mp4" [video-play]="onestepVideoState[i-1]"></video>
    </div>
    <a class="replay" [innerHTML]="os.replay.title" [ngClass]="{'active': onestepReplayState[i-1]}" (click)="onestepReplay(i-1)"></a>
</li>

The src like ../../../images/os/{{lang}}/medium/one-step{{i}}{{deviceRatio == 1?'':'@2x'}}.jpg contains {{lang}} and {{i}} and {{deviceRatio == 1?'':'@2x'}} to fetch different resources， and url-loader can not resolve this kind of url.

We have to spread out *ngFor and use ngif， write plenty of <img> tag to import images.

Are there some ways to load this kind of urls in angular2 and webpack?

Add1: sorry to forget to declare, lang and deviceRatio are depend on the browser environment, so the value is not sure when build. the value of lang would be one of cn and en， so we want to load both ../../../images/os/en/medium/..xxx.jpg and ../../../images/os/cn/medium/..xxx.jpg to the final dist directory.

Possible duplicate of Selectively exclude dynamic image paths from webpack with angular2 — smnbbrv
– smnbbrv, Commented Feb 15, 2017 at 8:17

display name · Accepted Answer · 2017-02-15 12:25:24Z

0

Depending on your build setup you could require the images upfront using require.context in the JS file.

function importAll (r) {
  return r.keys().map(r);
}
var modules = importAll(require.context(directory, useSubdirectories = true, regExp = /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/));

What you do is - require the folder with the images recursively and they will be available in desired locations. See more here: https://webpack.js.org/guides/dependency-management/#require-context

answered Feb 15, 2017 at 12:25

display name

6737 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load images from dynamic src in angular2 and webpack?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related