Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Import css e imagens

Professor estou com um css com include no index.html mas ele nao aparece no ios. No navegador aparece normalmente. Nem as imagens estao aparcendo

<ion-header>
  <ion-navbar>
    <ion-title>
      ATM  
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div padding>
    <div text-center>
      <img src="../../assets/images/logo.png" width="120px"/>
    </div>
    <div text-center style="font-weight: bold; font-size:20px; color: cadetblue;">
      Terminal de saque perto de você
    </div>
  </div>

  <div padding>
      <ion-list>
        <ion-item>
          <ion-label>Qual o seu principal banco?</ion-label>
          <ion-select [(ngModel)]="gaming">
          <ion-option value="nes">SICOOB</ion-option>
          <ion-option value="n64">BRB</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>
  </div>

  <div padding>
    <ion-slides  pager="true" style="height: 50%;">
        <ion-slide>
          <div class="cover-content cover-content-center">
            <h1 class="center-text color-white small-bottom fa-2x">DAI BRASIL</h1>
            <p class="center-text color-white opacity-70 no-bottom">Saques em reais e consulta de saldo em todo o Brasil, 24H</p>
          </div>
          <div class="cover-overlay overlay bg-black opacity-70"></div>
          <img width="700" class="owl-lazy" src="../assets/images/pictures/10lq.jpg" data-src="../assets/images/pictures/10.jpg"/>
        </ion-slide>

        <ion-slide>
          <div class="cover-content cover-content-center">
            <h1 class="center-text color-white small-bottom">ATM</h1>
            <p class="center-text color-white opacity-80 no-bottom">Você pode sacar diretamente em seu banco tando no débito quanto no crédito</p>
          </div>
          <div class="cover-overlay overlay bg-black opacity-70"></div>
          <img width="700" class="owl-lazy" src="../assets/images/pictures/atmex.png" data-src-retina="../../assets/images/pictures/atmex.png"/>
        </ion-slide>

        <ion-slide>
          <div class="cover-content cover-content-center">
            <h1 class="center-text color-white small-bottom">Flexibilidade</h1>
            <p class="center-text color-white opacity-60 no-bottom">Cartões nacionais e internacionais</p>
          </div>
          <div class="cover-overlay overlay bg-black opacity-70"></div>
          <img width="700" class="owl-lazy" src="../assets/images/pictures/cartao.png" data-src-retina="../../assets/images/pictures/cartao.png"/>
        </ion-slide>

        <ion-slide>
          <div class="cover-content cover-content-center">
            <h1 class="center-text color-white small-bottom">TRAVEL ATM</h1>
            <p class="center-text color-white opacity-80 no-bottom">Aqui você encontra os caixas eletrônicos<i class="fa fa-heart color-orange-dark font-12"></i> TRAVEL ATM.</p>
          </div>
          <div class="cover-overlay overlay bg-black opacity-70"></div>
          <img width="700" class="owl-lazy" src="../assets/images/pictures/viagem.png" data-src-retina="../../assets/images/pictures/viagem.png"/>
        </ion-slide>
      </ion-slides>
  </div>
</ion-content>
1 resposta
solução!

Boa tarde, Tiago! Como vai?

Eu não entendi muito bem o que vc fez, mas entendi o seu problema! Vc tem imagens que não estão sendo renderizadas e CSS que não está sendo aplicado no iOS.

Bom, começando pelas imagens, no código que vc anexou, vc não está utilizando a forma correta de apresentá-las! Na parte 2 do curso dentre várias coisas bacanas que são aprendidas, eu mostro que para trabalhar corretamente com imagens no Ionic, temos que colocar elas dentro da pasta assets, de preferência separando-as numa pasta específica de imagens que no exemplo eu chamei de imgs, e acessar elas sempre da seguinte forma:

<img src="assets/imgs/nome-da-imagem.jpg">

Em relação ao CSS, nunca adicione nada ao arquivo index.html! Coloque suas regras de CSS nos arquivos SASS correspondentes dos seus componentes criados!

Exemplo prático:

Para o componente HomePage teríamos, dentro da pasta src/pages/home, o arquivo home.scss e seria lá que vc deveria incluir as regras CSS utilizando SASS para aplicar no componente HomePage.

Caso vc queira aplicar um CSS de forma global para todos os elementos, o Ionic já te dá um arquivo específico pra isso que é o src/app/app.scss.

Qualquer coisa, se ainda houver algum problema é só falar!

Grande abraço e bons estudos, meu aluno!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software