Question

我使用html-loader在html中加载img，当img的src是invariable.as <img src='../example.png'>时，它运行良好。但是，当我这样写时：<img src="../../../assets/images/device_{{key.deviceName}}.png">，这将是错误：Can't resolve '../../../assets/images/device_{{key.deviceName}}.png' in '/Users/zhangxu/Desktop/LicenseServer/angular/src/app/components/home'。这是我的webpack.config.js：

module: {
        rules: [
            {
                test: /\.ts$/,
                loaders:['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]',
            },

            {
                test:/\.html$/,
                loader: 'html-loader',
                exclude: helper.root('src','index.html')

            },

            {
                test: /\.css$/,
                exclude: helper.root('src', 'app'),
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            {
                test:/\.css$/,
                include: helper.root('src', 'app'),
                loader:'raw-loader' 
                                    
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'postcss', 'sass']
            }
        ],

    },

这是我的HTML：

<div *ngFor="let key of devices;let i = index;">
       <div class="device" *ngIf="key.selected && !key.out_select" (click)="cancelSelectDevice(i)">
         <img src="../../../assets/images/device_{{key.deviceName}}.png" width="75">
             
        </div>

</div>

如何解决此错误？感谢

Answer 1

也许你可以使用[src]属性并连接字符串和变量'。

<img [src]="'../../../assets/images/device' + key.deviceName + '.png'" />

Answer 2

这里的问题是webpack只为您打包可以在构建期间解析的文件。但是您的图像路径是在运行时计算的，因此webpack无法知道您需要的图像/图像。

一种肮脏的方法是导入javascript文件中的每个图像。执行此操作时，webpack有机会在编译期间知道您想要的图像。

可能更简洁的方法是将这些图像放在资源文件夹中，让您的网络服务器提供此文件夹。

如何通过webpack 2加载src包含{{}}的html中的图像？

2 个答案: