显示图像但浏览器控制台在使用angularjs表达式设置图像src时显示404错误

Question

我正在使用asp.net mvc应用程序，我也在使用angularJS。

我遇到这个奇怪的问题，如果浏览器显示正确的图像，但浏览器控制台显示404错误，显示原始angularjs代码：

以下是我在视图中设置img src的代码：

    <a href="#" data-product-id={{item.Id}} class="link-product-name" data-toggle="modal" data-target="#modal-product-details">
        <img data-product-id={{item.Id}} class="img-thumbnail img-responsive" src="{{rootUrl + item.imagePath}}" />
    </a>

rootUrl是$ scope变量。

我是mvc和angularJS的新手。如果有人能帮助我，我真的很感激。谢谢！

Answer 1

通过角度指令src=

替换ng-src=属性

使用ng-src可以得到预期的结果，因为rootUrl + item.imagePath会被评估，并在加载角度后用替换。

<img data-product-id={{item.Id}} class="img-thumbnail img-responsive" ng-src="{{rootUrl + item.imagePath}}" />

但是对于src，浏览器会尝试加载名为{{rootUrl + item.imagePath}}的图片，这会导致请求失败。

有关ng-src的更多信息，请参阅this question