时间戳

首页 > 解决方案 > Ionic 3图像未在页面上呈现

html - Ionic 3图像未在页面上呈现

问题描述

我试图将 img 链接到我的 ionic 页面，甚至使用它不呈现的本地文件，我尝试通过外部 URL 上传它，甚至将它添加到与我的页面相同的文件夹中，即使它不呈现，它只是占用它周围的灰色区域，我不知道为什么，截图：https ://imgur.com/a/XHWwFyz 请帮忙

    <ion-header>

  <ion-navbar>
    <ion-title>Test</ion-title>
  </ion-navbar>
  <ion-grid>
    <ion-row>
      <ion-col col-auto push-4>
        <h1>Bem Vindo</h1>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-img [width]="310" [height]="200" src="https://imgur.com/a/QrUpBaV"></ion-img>
      </ion-col>
    </ion-row>
  </ion-grid>
  <hr>
  <ion-grid>
    <ion-row>
      <ion-col col-6 offset-4>
        <h2>Consultas</h2>
      </ion-col>
    </ion-row>
  </ion-grid>

  <div text-center>
    <ion-slides>
      <ion-slide>
        Lorem ipsum dolor sit amet, odio tempor periculis ex eum. Pro quem expetendis an, nam fierent deserunt ex. His simul voluptatum appellantur te, te vim cetero invenire, impedit incorrupte mea ea. Mea ei altera utroque, saepe ubique recteque ut sea, ne mel case option. Pro at consul constituto dissentiet, id amet sanctus constituto quo. Eos eu solet melius suscipiantur, in indoctum laboramus vix. Ne qui salutatus conclusionemque.

      </ion-slide>
      <ion-slide>
        Salutandi honestatis vituperatoribus an nam, mollis facilisi an pri. Nec te rebum admodum, dico natum solum duo ex. Ne enim vidisse sit. Ea dolores hendrerit eos. Ad vix definitionem necessitatibus, cu adipisci posidonium mel, ei cetero eleifend pri.

      </ion-slide>
      <ion-slide>
        Vis eu dolore utamur, te vide eloquentiam mei. Iusto aliquando democritum cu sed. In duo adipisci salutatus. Has eu posse mediocrem argumentum, autem cetero aperiam eam ei, et exerci commune cum. Te mea dicit postulant, iusto albucius id vis.
      </ion-slide>
    </ion-slides>
  </div>

  <br>
  <button ion-button block color="custom-green" (click)="onEntrarLogin()">Entrar</button>
  <h6 (click)="onEntrarCadastro()"><u>Já possui cadastro? clique em entrar. Caso ainda não possua cadastro, clique aqui para se cadastrar!</u></h6>
</ion-content>

标签： htmlcssangularionic-frameworkionic3

解决方案

图片路径不正确，试试： 

<ion-img [width]="310" [height]="200" src="https://i.imgur.com/xVhNrnM.jpg"></ion-img>

推荐阅读