Search code examples
htmlcssionic-frameworkionic-view

Ionic background img on div not loading LOCAL images but loads images from internet urls

I have this div which is loading perfectly image url from the internet but not my local image, very weird:

   <div class="col biggest-grid dir-medico-grid" ng-click="showDirMedico()">
          <img src="../img/dirmedico.png" class="img"/>

          <p>DIRECTORIO MÉDICO</p>
        </div>

So when I try this it works with no problem:

.dir-medico-grid{
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/confectionary.png);

}

but if I try this:

.dir-medico-grid{

  background: url(../www/img/doctors.jpg);
}

Now it doesn't work as you can se my path is correct i'm going from ionic.app.scss to doctors.jpg:

enter image description here

I have tried with background: url(../www/img/doctors.jpg) no-repeat center center fixed;, with '../www/img/doctors.jpg' and "../www/img/doctors.jpg" with background-imageinstead of background but nothing seems to work this is very weird.

Solution

  • Use only img/dirmedico.png in html

    <img src="img/dirmedico.png" class="img"/>

    And for css 

    .dir-medico-grid{

  background: url("../img/doctors.jpg");
}

    The thing is for html, all templates are rendered on index.html which is in same directory with img.