Question

我正在尝试为ng-repeat中的每个项目显示不同的图像。我首先遇到了webpack加载图像和理解HTML中的属性的一些问题。我可以通过更改html加载器来解决这些问题：

 {
            test: /\.html$/,
            loader: 'raw'
 },

为：

 {
            test: /\.html$/,
            loaders: [
                "html?" + JSON.stringify({
                    attrs: ["img:src", "img:ng-src"]
                })
            ]
        },

并添加以下两个加载器来加载图像：

{ test: /\.jpg$/, loader: "file-loader" },
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

现在每当我直接使用路径到图像时，图像就会像下载一样加载：

<img ng-src = "../images/lupine.png"/>

但是，当我尝试为ng-repeat中的每个项目加载图像时：

 <div class="menuItem__taskForm menuItem__checkboxes">
            <label ng-repeat="allergeen in allergenen" class="menuItem__checkbox">
        <input
            type="checkbox"
            name="selectedAllergenen[]"
            value="allergeen"
            ng-model="allergeen.selected"
            >
            <img ng-src = "{{'../images/' + allergeen.naam + '.png'}}"/>
        </label>
   </div>

我在网页上看到了破碎的图像，即使我在浏览器中检查元素时我可以看到图像的URI已正确连接：

检查浏览器中的一个损坏的图像：

<img ng-src="../images/lupine.png" src="../images/lupine.png">==$0

起初这个问题可能看起来很简单，很容易在互联网上找到，但我已经搜索了很长一段时间，但我仍然无法解决这个问题。

我希望你们能给我一些关于如何正确解决这个问题的新见解。

Answer 1

仅在alpha可用且语法正确

后初始化img src

allergeen.naam

Answer 2

我通过将以下代码添加到控制器来解决问题：

$scope.loadImage = function(image) {
return require('../img/allergenen/' + image + '.png');
};

然后我在HTML中调用它：

 <img src="{{loadImage(allergeen.naam)}}" />

通过这个webpack立即开始解析png文件，所以我猜问题是我不需要所需的资源 webpack不知道他必须为我的代码解决这些问题。

Webpack不会从ng-src中的给定路径加载图像

2 个答案: