首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

img源未在ngFor循环内显示

问题:img源未在ngFor循环内显示

回答: 这个问题通常出现在使用Angular的ngFor指令进行循环渲染时,图片的src属性没有正确绑定到循环中的每个元素上。以下是解决该问题的一些可能方法:

  1. 确保ngFor指令正确地绑定到了一个数组或集合上,并且循环中的每个元素都有一个唯一的标识符。
  2. 确保图片的src属性正确地绑定到循环中的每个元素上。可以使用插值表达式或属性绑定来实现。
    • 插值表达式示例:<img [src]="'path/to/image/' + item.id + '.jpg'" alt="Image">
    • 属性绑定示例:<img [src]="item.imageUrl" alt="Image">
  • 检查循环中的每个元素是否具有正确的图片路径或URL。可以通过在浏览器中查看元素的开发者工具来验证图片路径是否正确。
  • 确保图片路径或URL是相对于应用程序的根路径或正确的绝对路径。可以使用Angular的内置属性baseHref来设置根路径。
  • 如果图片是从远程服务器加载的,确保服务器允许跨域访问。可以在服务器端设置适当的CORS(跨域资源共享)头。
  • 如果以上方法都无效,可以尝试在循环中添加一个额外的div元素,并将图片放置在该div内。这有时可以解决一些渲染问题。

总结: img源未在ngFor循环内显示的问题通常是由于图片的src属性没有正确绑定到循环中的每个元素上导致的。通过正确绑定src属性,确保图片路径正确,并处理可能的跨域访问问题,可以解决这个问题。如果问题仍然存在,可以尝试其他方法或调试工具来进一步排查和解决。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 模板语法二 顶

以前缀类开始,可选地跟一个点(.)和一个CSS类的名字替代括号的元素属性:[class.class-name]。 以下示例显示如何使用class绑定来添加和删除应用程序的“special”类。...NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。 您可以定义一个HTML块来定义应该如何显示单个项目。 您告诉Angular将该块用作呈现列表中每个项目的模板。...ngFor指令迭代由父组件的heroes属性返回的heroes,并在每次迭代期间将hero设置为列表中的当前项目。 要访问hero的属性,请参考ngFor宿主元素(或其后代)中的hero输入变量。...请注意数据绑定目标和数据绑定之间的重要区别。 绑定的目标是在=的左边。 位于=的右侧。 绑定的目标是绑定标点符号中的属性或事件:[],()或[()]。...是在引号(“”)或插值({{}})。 source指令的每个成员都可以自动获得绑定。 您不必在模板表达式或语句中使用任何特殊的操作来访问指令成员。 您对目标指令的成员访问权限有限。

29.9K20

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它时都需要显式调用一下...一句话说就是根据情况合理选择显示控制方法。 问题三:标签内容能否换成注释掉的内容?...class AboutPage { @ViewChild(Slides) slides: Slides; vm: { dessertSlides: any[] , //轮播数据...dessertList: any[], //甜点列表数据 selectedSegment: string //segment选择对象 } = { dessertSlides...数据未正确应用 对比上一节的实际效果图,会发现这里只显示了两个图片,什么原因呢?

1.4K20

Angular快速学习笔记(3) -- 组件与模板

显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性。...="let hero of heroes"> {{ hero.name }} ` 在模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性... 小结 带有双花括号的插值表达式 (interpolation) 来显示一个组件属性 用 ngFor 显示数组 用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性 用 ngIf...插值表达式{{...}}可以把计算后的字符串插入到 HTML 元素标签的文本或对标签的属性进行赋值。...绑定的类型可以根据数据流的方向分成三类: 从数据到视图、从视图到数据以及双向的从视图到数据再到视图。

15.2K30

AngularDart4.0 指南- 模板语法一 顶

在以下片段中,双花括号的标题和引号中的isUnchanged引用了AppComponent的属性。...前面的例子显示了这样一个名字冲突。 该组件具有hero属性,而* ngFor定义了英雄模板变量。 {{hero.name}}中的英雄是指变量输入变量,而不是组件的属性。...在事件循环的一个回合期间,依赖值不应该改变。如果一个幂等表达式返回一个字符串或一个数字,当它在一行中调用两次时会返回相同的字符串或数字。...在事件循环的这个周期中,您可以自由地在任何地方进行所有更改。 像模板表达式一样,模板语句使用了一种看起来像Dart的语言。...您只需声明绑定和目标HTML元素之间的绑定,然后让框架完成工作。 Angular提供了多种数据绑定。 本指南涵盖了大部分的Angular数据绑定及其语法的高级使用。

5.1K10

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件的属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...要显示组件的属性,插值是最简单的方式,格式为:{{属性名}}。...class AppComponent { title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性的值,并显示在浏览器中...,显示信息如下: 使用 ngFor 显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts 文件: import { Component } from '@angular...template: ` {{title}} 我喜欢的网站: {{mySite}} 网站列表: <li *ngFor

2.4K20

Ionic3学习笔记(十三)HttpClient 实现 HTTP 请求以及踩过的一些坑

type=hot&offset=0&limit=1 Request: type ==> hot 类型(正在热映) offset 初始数据位置 limit 显示数据最大上限值 即将上映电影列表:...type=coming&offset=0&limit=1 Request: type ==> coming 类型(即将上映) offset 初始数据位置 limit 显示数据最大上限值 电影详情...ion-title>电影 <button ion-item *ngFor...一些坑 坑1: 未在 app.module.ts 中导入 HttpClientModule ionic g provider movies 命令执行后并未在 app.module.ts 中自动导入 HttpClientModule...坑3: WKWebView 问题 emmm… 真机调试的时候,Android 端木有问题,显示正常,而 iOS 端啥都不显示,不知道问题出在哪里(我怀疑是 WKWebView 的 CORS 问题,求评论

2.8K10

AngularDart 4.0 高级-结构指令 顶

从积极的方面来说,再次显示元素很快。 该组件的以前的状态被保存并准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏和展示有时候是正确的。...NgFor指令具有比本指南中显示的NgIf更多的功能,包括必需的和可选的。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...当NgSwitchCase的值与switch的值匹配时,会显示它的宿主元素。当没有同级NgSwitchCase匹配switch的值时,NgSwitchDefault显示它的宿主元素。... 您也有一个恰好适用于段落的的CSS样式规则。 p span { color: red; font-size: 70%; } 构建的段落呈现奇怪。 ?...NgIf在条件为true时显示模板内容。 UnlessDirective在条件为false时显示内容。

16K20

AngularDart4.0 指南- 显示数据 顶

用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表中的第一个名字。...元素中的* ngFor是Angular“repeater”指令。...在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。 @Component(directives:...)...双引号的模板表达式,* ngIf =“heros.length> 3”,看上去和表现很像Dart。 当组件的英雄列表中有三个以上的项目时,Angular会将该段落添加到DOM,并显示消息。...概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类,用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

5.3K10

Angular 从入坑到挖坑 - 组件食用指南

,从而实现数据与用户呈现的一致性 从数据到视图:插值、组件中的属性、dom 元素的 property 3、css 样式、css 类 从视图到数据:事件 视图与数据之间的双向绑定:数据对象 分类...id="userName" [value]="name" (input)="name=$event.target.value"> 4.1.4、属性、样式绑定 dom 元素的 property 绑定 html 标签的 attribute 绑定 attribute 绑定的语法类似于...,当重新显示该元素时,会重新执行初始化的过程 与销毁元素不同,对于隐藏的元素来说,所有的元素监听事件还会执行监听的,再次显示时不用重新进行初始化过程 NgFor:通过定义单条数据的显示格式,angular...以此为模板,循环渲染出所有的数据 {{i+1}} - {{item.name}} --- {{item.price

15.8K30

angular知识点梳理第二篇-基本语法

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失,这里和隐藏要区别开,他的效果和css中的display:none效果是一致的,和visibility...改变NgIf状态 当前的isShow:{{isShow}} 我是一个div块 运行效果 true显示...: false不显示: Ng-container ng-container 这里有必要介绍一下,这个类比的话就喝vue的template是基本一致的,不是完全一致,我们可以将它看作一个承载体

2.5K30
领券