`

angular应用,当img元素的地址来自模型,应该使用ng-src

 
阅读更多

今天调一个页面,碰巧开着console,偶然发现发起了无效的http请求,提示404错误

虽然不影响功能,还是检查了一下,发现是因为有类似下面的代码:

<img src="{{item.imgPath}}" alt=""/>

所以,在angular实际渲染完成之前,浏览器读到img标签,就向{{item.imgPath}}这个地址发起了请求,结果当然是404。实际上应该使用:

<img ng-src="{{item.imgPath}}" alt=""/>

就会有延迟加载的效果了,因为ng-src不是HTML标准attr,浏览器无法识别,也就不会发起无效的http请求
分享到:
评论

相关推荐

    AngularJS基础 ng-src 指令简单示例

    当你需要使用AngularJS代码设置图片地址时,你应该使用ng-src指令而不是src属性。ng-src指令确保AngularJS代码在执行前图片不会被显示,这样可以防止在AngularJS代码执行之前浏览器尝试加载一个错误的URL。 ng-src...

    AngularJS参考手册

    - **ng-src/ng-srcset**:分别为`&lt;img&gt;`元素设置`src`和`srcset`属性。 - **ng-style**:动态设置元素的样式。 - **ng-submit**:定义表单提交时的行为。 - **ng-switch**:基于表达式的值切换不同的HTML结构。 - **...

    ngImgCrop截图圆形

    &lt;img ng-src="{{croppedImage}}" alt="Cropped Image" /&gt; ``` 这里,`&lt;input type="file"&gt;`用于选择图片,`setImage`函数接收文件并设置`image`模型。`&lt;img-crop&gt;`指令的`image`属性与`imageFile`模型绑定,`...

    AngularJs 参考手册PDF

    - `ng-src`: 为`&lt;img&gt;`元素指定源地址。 - `ng-submit`: 规定`form`提交时执行的表达式。 ### AngularJS事件 AngularJS支持各种事件,这些事件可以在指令中绑定,以实现丰富的交互效果: - `ng-click`、`ng-dbl-...

    Angular.js中上传指令ng-upload的基本使用教程

    在实际使用ng-upload时,记得在你的Angular应用模块中注入ngFileUpload依赖,例如: ```javascript angular.module('fileUpload', ['ngFileUpload']); ``` 总结一下,Angular.js中的ng-upload指令提供了一种方便的...

    前端项目-angular-bindonce.zip

    使用`angular-bindonce`可以显著减少应用中的Watcher数量,提升性能,特别是在数据量大或者动态渲染视图的场景下。但需要注意的是,bindonce适用于那些不需实时更新视图的数据,对于需要实时响应模型变化的组件,...

    angular-slick:光滑轮播的Angular指令

    &lt;img ng-src="{{item.image}}" alt="{{item.title}}"&gt; ``` ```javascript app.controller('MyCtrl', function($scope) { $scope.items = [ { title: 'Image 1', image: '/path/to/image1.jpg' }, // ... ...

    举例详解AngularJS中ngShow和ngHide的使用方法

    AngularJS是Google开发的一个开源JavaScript框架,它是用于构建动态网页应用的MVC框架,即模型(model)-视图(view)-控制器(controller)。在AngularJS中,ngShow和ngHide是两个非常实用的内置指令,它们允许开发者控制...

    angular-owl-carousel:猫头鹰轮播2的角度指令

    &lt;img ng-src="{{item.src}}" alt="{{item.alt}}"&gt; ``` 在 `$scope` 中定义 `carouselOptions` 和 `items` 数据: ```javascript $scope.carouselOptions = { items: 3, // 显示的项目数量 loop: true, // ...

    Responsive Web Design with AngularJS

    &lt;img ng-src="{{product.imageUrl}}" ng-style="{ 'max-width': '100%' }" /&gt; ``` 3. **无限滚动加载评论**:结合AngularJS的服务和指令,实现当用户滚动到页面底部时自动加载更多评论。 ```javascript app....

    vue学习笔记

    &lt;img :src="url" alt=""&gt; ``` #### 七、样式绑定 Vue.js 提供了两种类型的绑定: - **`v-bind:class`**:用于动态绑定类名。 - **`v-bind:style`**:用于动态绑定样式。 例如: ```html , blue: isBlue }"&gt;Hello...

    Angular 2.0+ 的数据绑定的实现示例

    在Angular 2.0及更高版本中,数据绑定是框架的核心特性之一,它使得应用程序的视图和模型之间能够高效地同步数据。本篇文章将详细解释Angular中的数据绑定概念,并通过示例展示不同类型的绑定方式。 首先,让我们从...

    angularjs实现多张图片上传并预览功能

    这个指令的主要作用是监听`input[type=file]`元素的`change`事件,当用户选择图片后,读取文件并更新模型。在`directive.js`文件中: ```javascript angular.module('routerModule').directive('fileModel', ['$...

    AngularJs directive详解及示例代码

    &lt;img src="img/{{username}}.jpg"/&gt; Hello {{username}}! ``` AngularJS的编译过程包括三个主要步骤: 1. **HTML解析**:浏览器将HTML转换为DOM对象,确保模板符合HTML规范,以便后续处理。 2. **DOM编译**:调用...

    technical-challenge

    2. **HTML属性**: 元素可以有属性,例如`&lt;a&gt;`元素的`href`属性用于指定链接的目标地址,`&lt;img&gt;`的`src`属性用于设定图片源。 3. **HTML5新特性**: HTML5引入了许多新的元素和API,如`&lt;canvas&gt;`用于画布绘图,`...

    k1200

    例如,`&lt;a&gt;`标签的`href`属性指定链接的目标地址,`&lt;img&gt;`的`src`属性指定了图片的路径。 3. **HTML5**:这是HTML的最新版本,引入了许多新的元素和功能,如`&lt;canvas&gt;`用于图形绘制,`&lt;video&gt;`和`&lt;audio&gt;`用于...

Global site tag (gtag.js) - Google Analytics