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

【问题标题】：Webpack doesn't load images from given path in ng-srcWebpack 不会从 ng-src 中的给定路径加载图像
【发布时间】：2017-04-07 11:55:32
【问题描述】：

我正在尝试为 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

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

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

【问题讨论】：

看起来你的 HTML 在 JS 替换 ng-src 之前被渲染了
有什么方法可以改变你知道的渲染顺序吗？

标签： javascript html angularjs image webpack

【解决方案1】：

只有在allergeen.naam可用且正确的语法为之后才初始化img src

<img ng-src = "../images/{{allergeen.naam}}.png" ng-if="allergeen.naam"/>

【讨论】：

感谢您的回答，我认为我的 Webpack 可能有问题，因为现在我收到一条错误消息 Error: Cannot resolve 'file' or 'directory' ..images/{{ allergeen.naam}}.png 在 Html 页面中。
@DennisNoens 这可能会有所帮助github.com/webpack/webpack/issues/981

【解决方案2】：

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

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

然后我在 HTML 中这样调用它：

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

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

【讨论】：