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在互联网上，但我已经搜索了相当一段时间，我仍然无法解决这个问题。

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

来源

2016-11-23 Milkywaay

看起来你的HTML在JS替换之前得到了ng-src –

有什么办法可以改变你知道的渲染顺序吗？ – Milkywaay

我加入以下代码，以我的控制器解决了这一问题：

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

我则在调用此这样的HTML：

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

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

来源

2016-11-24 21:13:07 Milkywaay

初始化IMG SRC后，才allergeen.naam可用和正确的语法是

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

来源

2016-11-23 17:23:15

谢谢你的回答，我认为我的Webpack可能有问题，因为现在我收到错误说错误：无法解析'文件'或'目录'..images/{{allergeen.naam}}。png在Html页面。 – Milkywaay

@DennisNoens这可能有助于https://github.com/webpack/webpack/issues/981 –

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

回答

相关问题