[英]AngularJS binding in 'src' attribute of <img> tag
I have a table
with many rows
and each row has a preview image to be shown on the top right corner when mouse is hovering the row. 我有一个包含许多
rows
的table
,当鼠标悬停在行上时,每行都有一个预览图像显示在右上角。
This is how I put the image tag with AngularJS binding for URL in src
attribute: 这就是我在
src
属性中为URL添加带有AngularJS绑定的图像标记的方法:
<img src="{{imageUrl}}"/>
But there is the following error in console: 但是控制台中存在以下错误:
GET http://localhost/#/imageUrl 404 (Not Found)
获取http:// localhost /#/ imageUrl 404(未找到)
How to get rid of this error in browser console? 如何摆脱浏览器控制台中的此错误?
Angular有自己的img
指令,称为ng-src
:
<img ng-src="{{imageUrl}}"/>
You need to use ng-src
instead of src
in your <img>
tag. 您需要在
<img>
标记中使用ng-src
而不是src
。
The documentation says like this, 文档说这样,
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. 在src属性中使用{{hash}}之类的Angular标记无法正常工作:浏览器将使用文字文本{{hash}}从URL中获取,直到Angular替换{{hash}}中的表达式。 The ngSrc directive solves this problem.
ngSrc指令解决了这个问题。
https://docs.angularjs.org/api/ng/directive/ngSrc https://docs.angularjs.org/api/ng/directive/ngSrc
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.