Question

我有一张Angular材料设计卡。当我使用＆s; src将图片拉入我的HTML模板时，＆＃39;它显示在桌面上，但不显示在任何移动浏览器上。当我转到实际的URL时，图像存在于我的服务器上，因此我知道问题不在于图像的路径。

当我改变＆＃39; src＆＃39;要么＆＃39; ng-src＆＃39;或者＆＃39; data-ng-src，＆＃39;图像不会显示在手机或桌面上。模板很简单;就像我提到的那样，图像路径会导致我服务器上的确切图像。我有什么关键吗？

<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>

Answer 1

您需要使用'ng-src'来插入表达式。

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

Angular + Bootstrap =无图像

1 个答案: