如何从angular2和webpack中的动态src载入图像？

我在我的项目中使用了angular2和webpack2。如何从angular2和webpack中的动态src载入图像？

我的同事从Angular2 QuickStart开始项目，然后将其移至Webpack环境。

我用html-loader加载组件templats和使用url-loader提取图像和字体：

{ 
    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]' 
},

的模板是这样的：

<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>

当我盖了，的WebPack可以找到图像并将它们导出到asstes/。

<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>

像../../../images/os/{{lang}}/medium/one-step{{i}}{{deviceRatio == 1?'':'@2x'}}.jpg在src包含{{lang}}和{{i}}和{{deviceRatio == 1?'':'@2x'}}获取不同的资源，url-loader无法解决此网址类型：

它，直到我遇到这样的模板工作正常。

我们必须传播出*ngFor并使用ngif，写大量的<img>标签来导入图像。

有没有一些方法来加载angular2和webpack这种类型的网址？

ADD1：对不起，忘了申报，lang和deviceRatio是依赖于浏览器环境，所以价值是无法确定时所建。 lang的值将是cn和en之一，因此我们要将../../../images/os/en/medium/..xxx.jpg和../../../images/os/cn/medium/..xxx.jpg加载到最终的dist目录。

来源

2017-02-15 Zhang Chao

的[选择性地从与angular2的WebPack排除动态图像路径]可能的复制（http://stackoverflow.com/questions/38205980/selectively-exclude-dynamic-image-paths-from-webpack-与-angular2） – smnbbrv

根据您的构建设置，您可能需要在JS文件中使用require.context的预先图像。

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)$/));

你要做的就是 - 需要与图像的文件夹递归，他们将在需要的位置提供。详见这里：https://webpack.js.org/guides/dependency-management/#require-context

来源

2017-02-15 12:25:24 mantastrunce

如何从angular2和webpack中的动态src载入图像？

回答

相关问题