Ionic 3图像未在页面上呈现

时间:2018-08-24 03:29:37

标签: html css angular ionic-framework ionic3

我试图将img链接到我的离子页面,甚至使用它不呈现的本地文件,我也尝试通过外部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>

1 个答案:

答案 0 :(得分:0)

图像路径不正确,请尝试:

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