【问题标题】:image not displaying on HTML page图像未显示在 HTML 页面上
【发布时间】:2019-08-14 03:45:12
【问题描述】:

我正在尝试使用内部路径中的 ion-avatar 标签加载两个图像文件,并且我一直在尝试这样做,使用外部谷歌链接和本地路径,但是在任何一种情况下都没有加载图像。我已经玩了一段时间的路径,但我仍然无法弄清楚哪里出了问题。

这就是我在我的 HTML 页面中尝试的方式

 <ion-item *ngFor="let question of questions">
          <ion-avatar slot="start">
            <ion-img [src]="question.imageUrl"></ion-img>
          </ion-avatar>

我的 home.service.ts

     private questions: Questions[] = [
    {
      id: 'p1',
      title: 'quanto da 1+1?',
      imageUrl: 'img1.jpg',
      text:"Como faço pra calcular 1+1?",
      questions: ['local', 'endereço', 'horario']
    },
    {
      id: 'p2',
      title: 'vaga de emprego',
      imageUrl: 'https://commons.wikimedia.org/wiki/File:Julio_Dantas.jpg',
      text:'Alguem sabe de uma vaga de emprego?',
      questions: ['vaga', 'experencia', 'salario']
    }
  ];

我的图片在本地的位置

编辑:我更改了链接,它开始正常工作,但是我的图像和页面下方的内容现在显示为滚动...

【问题讨论】:

  • 在开发者控制台中检查它,看看被替换的是什么,我的意思是正在加载什么来代替图像、字符串或其他内容
  • 你的语法是正确的,你必须查看开发控制台或Angury
  • 你有没有试过把你的图片放在 assets 文件夹中,并像imageUrl: 'assets/img1.jpg'一样链接它
  • 我更改了链接,现在可以使用,但是由于某种原因,它现在显示为滚动页面

标签: html angular ionic-framework ionic4


【解决方案1】:

使用[alt] 属性检查图像标签是否正在加载。如果加载,则意味着 [src] 路径存在问题。

【讨论】:

    猜你喜欢
    • 2012-12-13
    • 1970-01-01
    • 1970-01-01
    • 2015-04-09
    • 2012-09-29
    • 2014-04-14
    • 2023-04-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多