Webpack不会从ng-src中的给定路径加载图像
我想为ng-repeat中的每个项目显示不同的图像。 我第一次遇到一些webpack加载图片和理解HTML中属性的问题。Webpack不会从ng-src中的给定路径加载图像
到:我可以通过更改HTML装载机解决这些问题
{
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-重复每一个项目:
<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
起初,这个问题似乎是直线前进,并容易被缶nd在互联网上,但我已经搜索了相当一段时间,我仍然无法解决这个问题。
我希望你们能给我提供关于如何正确解决这个问题的新见解。
我加入以下代码,以我的控制器解决了这一问题:
$scope.loadImage = function(image) {
return require('../img/allergenen/' + image + '.png');
};
我则在调用此这样的HTML:
<img src="{{loadImage(allergeen.naam)}}" />
通过这样做webpack立即明星ted解决png文件, 所以我想问题是我不需要所需的资源和 webpack不知道他必须解决这些我的代码。
初始化IMG SRC后,才allergeen.naam
可用和正确的语法是
<img ng-src = "../images/{{allergeen.naam}}.png" ng-if="allergeen.naam"/>
谢谢你的回答,我认为我的Webpack可能有问题,因为现在我收到错误说错误:无法解析'文件'或'目录'..images/{{allergeen.naam}}。png在Html页面。 – Milkywaay
@DennisNoens这可能有助于https://github.com/webpack/webpack/issues/981 –
看起来你的HTML在JS替换之前得到了ng-src –
有什么办法可以改变你知道的渲染顺序吗? – Milkywaay