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

Question

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:

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.

Use the full path of the image on the local machine just for testing. Let us know the result. — ODelibalta, Sep 02 '15 at 17:08
Try `background: url('/www/img/doctors.jpg');` https://css-tricks.com/quick-reminder-about-file-paths/ — chrisbedoya, Sep 02 '15 at 17:14
@chrisbedoya that didn't work but this works `background: url('../img/doctors.jpg');` I'm perplexed! — CommonSenseCode, Sep 02 '15 at 17:22

Mudasser Ajaz · Accepted Answer · 2015-09-02T17:19:19.157

1

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.

edited Sep 02 '15 at 17:19

answered Sep 02 '15 at 17:13

Mudasser Ajaz

6,197
1
26
29

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

1 Answers1