Ionic gifs

Ionic Framework ionic-v3
1

I’m trying to load GIFS into my ionic app.

It works with Ionic Serve but whenever I try it on any mobile device it won’t load it. Is this a framework problem the way it handles GIFS?

I’m saving the GIFS in assets/img/myGif.gif

Here is the code I’m using to load the GIFS in from my API

<img id="image" align="center" class="mainPicture" src="{{content[indexCount].media}}" onError="this.src='assets/img/defeaultLogoPic.png'" />

2

Hello,
make a console log what you want to apply to your src. Maybe a typo like in defeaultLogoPic.png.
Otherwise that ionic serve works and not on device depends to that, that your path points to src folder, which is not avialable on device.

Post console.logs output for further investigation.

Best regards, anna-liebt

3

I replied to you in SO, but I would:

Do property binding instead of interpolation: <img [src]=“imagePath”>
I would test to see if you can even render the file locally

Please also indeed console log this one: content[indexCount].media to ensure it has valid image path

4

I like to provide a default image:

      ...

      <ion-thumbnail *ngIf="beer.label; else defaultLabel">
        <img src="{{'assets/data/labels/' + beer.label}}">
      </ion-thumbnail>

      <ng-template #defaultLabel>
        <ion-thumbnail>
          <img src="{{'assets/data/labels/' + 'default-craft-beer-label.png'}}">
        </ion-thumbnail>
      </ng-template>

      ...

And, remember images referenced in your .scss are relative to the location of the .scss file:

      ...

      &[class*="fa-empty-star"] {
        mask-image: url(../../../assets/imgs/icons/empty-star.svg);
      }
      &[class*="fa-empty-star-half"] {
        mask-image: url(../../../assets/imgs/icons/empty-star-half.svg);
      }
      &[class*="fa-star"] {
        mask-image: url(../../../assets/imgs/icons/star.svg);
      }

      ...

For example:

39
Screen Shot 2018-04-05 at 09.07.39.png368×648 120 KB

5

While @robinyo’s method of building up the image src property using {{}} interpolation will work fine for ordinary URLs, it won’t for data URLs. See this discussion for why and what to do instead.

1 Like
6

@rapropos sure, it’s still an MVP: https://craftbeer.org.au/

So I haven’t as yet converted the SVG file’s into a dataurl.

See: https://robferguson.org/blog/2018/04/09/theming-your-ionic-3-app-bespoke-svg-icons/

7

this is what’s being console logged:

assets/img/myGif.gif

8

The path that’s being displayed is:

assets/img/myGif.gif

when I go to my /img folder, the GIF is in there but it wont display

9

As anna_libt mentioned, would it have to do with my GIFs/images being stored in the src/assets/img folder? It’s able to generate images just fine though, it just doesn’t display the GIFS - which is what’s puzzling me

10

How do u upload/view in mobile?

Using cordova, devapp or ionic view?

If it is ionic view then you may have to git add the assets

If it is cordova I suggest u to investigate the ipa/apk to see if the assets r included

11

I use gif’s in my app without any problem.

In html:

<img [src]=“timer” >

`and in code:

this.timer = “assets/meta/images/timer.gif”;

I think the problem regarding it not working on mobile - could be caused by the naming convention you are using - i.e .this.src=‘assets/img/defeaultLogoPic.png’" is a mixture of lower and upper case characters. A pc is not case sensitive but on some mobiles it is - so I only use lower case for file names.

12

I’ve been building with xcode and testing it on an emulator/device. I’ve also tested it on ionic view as well.

13

I have seen a post the other day where people had to reference ./assets/img/whatever... in iOS to fix a reference error

Ionic View: u r sure you git added the assets folder before the commit and push (just to be sure).

14

I have .png files that are in the same folder that are being displayed. It’s only the .gif files that won’t show up

15

where are you storing your gifs? what folder?

16

Rename the gif to one of your png, including that extension - dirty trick. If it does show the picture then unsurely know it is the name

18

The .png and the .jpg images are appearing. It’s the .gif files that aren’t on both android and ios platforms

19

Within a sub folder in the src/assets folder.

Try using a png or jpg file with the same file name and see if that loads - at least you know it is not the naming convention.

Try this file which loads ok for me.
timer .

20

I moved all my gifs inside the www/img folder ( I created the img folder) and that seemed to do the trick. Anybody have an explanation why this was the case? I was previously storing them in the src/assets/img

21

that surely should not officially count as solution as all the files in www folder should be generated using scripts (and copied from other places). but if it works for you, why complain?