2016-02-15 69 views
1

我有一張Angular材質設計卡片。當我使用'src將圖片拖入我的HTML模板中時,它會在桌面上顯示,但不會在任何移動瀏覽器上顯示。當我轉到實際的URL時,圖像存在於我的服務器上,所以我知道問題不在圖像的路徑中。Angular + Bootstrap =沒有圖片

當我將'src'更改爲'ng-src'或'data-ng-src'時,圖片不會顯示在移動設備或桌面上。模板非常簡單;就像我提到的那樣,圖像路徑導致我服務器上的確切圖像。有什麼我失蹤的鑰匙?

<md-card> 
    <div class="panel-heading menu_header">{{item.entree}}</div> 
    <div> 
     <div> 
      <i class="fa fa-info-circle fa-2x info"></i> 
      <img class="img-responsive" src="/media/{{item.primary_image}}" 
       alt="{{item.entree}}"> 

      <p class="menu_desc price-widget" id="slidemarginleft">{{item.description}}</p> 
     </div> 
    </div> 
    <div class="panel-body">{{item.side}}</div> 
    <div class="center" style="margin-bottom: 7px;"> 
     <div class="input-group col-md-8 col-md-offset-2 col-xs-8 col-xs-offset-2"> 
      <div class="numbers-row"> 
       <div class="dec increment input-group-btn col-md-3 col-xs-7">-</div> 
       <div class="col-md-6 col-md-offset-1 col-xs-6 col-xs-offset-1"> 
        <input class="form-control cart-qty" id="{{item.meal_type}}" type="text" 
          name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}"> 
       </div> 
       <div class="inc increment input-group-btn col-md-3">+</div> 
      </div> 
     </div> 
    </div> 
</md-card> 

回答

0

您需要使用'ng-src'來插入表達式。

<img ng-src="/media/{{item.primary_image}}" /> 
+0

這沒有幫助 - 它實際上使頁面上的所有內容都變爲空白。 – acs254

+0

哎呦,試試更新的版本。 ;)ng-src是你想要的。當然,服務器端也可能存在問題。 – Rorschach120

+0

這就是我第一次嘗試,但它只顯示ALT標記,而不是圖像。 – acs254