Image not showing in the ionic modal


#1

Hello everyone, I have a problem with the display of images. In the capture below you can see the disposition of my repositories.
—the page that must display images is a modal present in templates/agent/help/agentGuide.html.
—the page that suppose to launch the modal is present in templates/agent/help.html,
—my images are in the folder img/help/

the problem is now in the modal: If I launch the modal in the browser I can see my images properly but in the physical device they dont appears (they are broken).
In the modal(templates/agent/help/agentGuide.html) I call my images like

img src=“img/help/balance.gif”

I have tried to call them like img src=“android_assets/www/img/help/balance.gif” but nothing works.

I am testing it on android 5.1.1
repocap2


#2

You shouldn’t use android_assets in the img src. Are your images being copied over to the www folder and then properly copied over when you build for the device? If so, double check where the images end up.

I suspect the issue is from the build command, which may reorganize your project folders. I’d double check how you are building and then referencing these files. One solution would be a gulp or grunt task which only runs during the build command and can update any file references to where they are moved/copied to.


#3

Yes, my images are being copied over www folder inside my android platform folder. the repo is like:
platforms\android\assets\www\img\help. I also remarked that when i am running in livereload mode, those images display correctly: ionic run android --device -lc. I dont really know what is the issue. Maybe I think that I have to create an entire state for this page instead of using a modal. thank you for your help


#4

Have you tried opening up the chrome developer tools with your android device connected? This can help you track down any errors and see what may be going wrong.

If the images are getting copied properly, and they work in the browser and with livereload, this sounds like it may be a whitelist issue. Are you using the cordova whitelist plugin?

Also, do you have a “Content-Secruity-Policy” meta tag on your index.html page? You need to make sure you set the proper img-src content tags.


#5

Yes i am using a Content-Security-Policy in my html, and the whitelist plugin is installed in my project by default but I dont use it. Do I have to remove these things?


#6

Waiting for long time and nobody is helping me. I solved this problem myself. The problem was about the file I was using, they were .GIF files. I change format to .PNG now it is working.
Thank to everybody anyway