Load image from local folder

Hi all,

I need help to load image for ion-card component.
The structure of my project is like this:

 +app
   -> .meteor
   -> client
       -> collections
       -> components
           -> card-avatar
               -> card-avatar.html
               -> card-avatar.css
               -> card-avatar.ts

Inside the card-avatar.html I declare an ionic card component and I want to attach an image from local folder, lets say img/pic01.png.

<ion-card class="user-card">
  <ion-card-header >
      <b>Waldpfad Bayern</b>
  </ion-card-header>
  <ion-card-content >
      <img src="img/pic01.png"/>
  </ion-card-content>
</ion-card>

My question: since I used Ionic2 and Meteor, where I must put the PNG file. In this project, I dont find any “www” folder like other tutorial said.

Can somebody help my problem?

Best regards,

Teguh

put it under some folder under www/ (not build/) and refer to the image with relative path e.g. ./img/pic01.jpg, www folder is persistent, it’s www/build/ that’s not.

Hi itlr,
thanks for your reply. I found the answer yesterday from stackflow.
We must put our images file in public folder. We dont need new folder like www, IOnic2 Meteor has prepared folder namely “public”.

From meteor documentation :slight_smile:

/public

Files in /public are served to the client as-is. Use this to store assets such as images. For example, if you have an image located at /public/background.png, you can include it in your HTML with or in your CSS with background-image: url(/background.png). Note that /public is not part of the image URL.

Have good day :smiley: