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中的給定路徑加載圖像

回答

相關問題