Can't display image from file system after retrieving urls from SQLite database

ionic-v1
1

Please i need an urgent help i am creating an app that downloads a zip file and unzip it then stores a generated url of about 76 different urls in an SQLite database which the table is later called in a different controller and the records are retrieved and stored to an array. the array values are now used in an ionic ion-slide-box tag with collection-repeat to display all images. but on the view no images is displayed…please here is my code

See the Pen beBpXK

2

Hello,
Your post is not really readable, make it better or used an external link to show your code.

I think you have a problem with your ng-repeat system.
You put your urls in the $scope.imgurls variable but in your html I can read {{imgs.url}}

Even more, you want the property url from the object imgs. Or in your imgurls scope variable you only put the URL.

Try something like that :

 <ion-slide-box>
         <ion-slide ng-repeat="url in imgurls">
               <img ng-src= "{{url}}" style="width:100%;" />
         </ion-slide>
 </ion-slide-box>

Hope I could help.

3

thank you for you reply… i have checked that and that din’t fix it. so i created a codepen to show the codes… please note if i take the link file:///mnt/sdcard/Android/data/app.simagazine.mainapp/files/SIMagissues/issue2/issue1.png and insert it directly into the img tag or assign it to a scope variable this would show but in an array the images don’t show

4

In your img tag :
<img ng-src= "{{imgs.url}}" style="width:100%;" />
Change imgs.url with imgs. You don’t have the property url in the imgs.

If your logs show something like that :
url 0 file:///mnt/sdcard/Android/data/app.simagazine.mainapp/files/SIMagissues/issue2/issue1.png
SELECTED::file:///mnt/sdcard/Android/data/app.simagazine.mainapp/files/SIMagissues/issue2/issue1.png

Then what I wrote should work.

You don’t close your ion-view tag.

5

hi thanks for your reply and time… so i did what you said and it was not displaying… this has cost me 3 weeks now so i got angry and now changed my approached…So my new approach is to save the data to create the url into the database and regenerate the url in the view controller i want the imges to work and its working now. but i have a problem with that too. my array is just holding 46 items instead of 78 items from my loop. and in the view the images displayed are lagging when i scroll trough the ion-slide-box… any help would be much appreciated

6

I prefer use the ion-slides instead of ion-slide-box.
Take a look there : http://ionicframework.com/docs/api/directive/ionSlides/
Plus, the ion-slides is based on SWIPER API from dangerous.io take a look to the swiper api

With this, you can use the lazy loading option which is great for the image. I think it will be smoother.

7

wow it worked…hahahahah and i was getting an error to specify this collection-item-width="’’" collection-item-height="’’" when i was using collection-repeat… but thanks bud it worked with the ion-slides and its even faster…

1 Like
8

Happy for you ! :slight_smile:
Was it easier than you thought ?

9

Yeah lol…please one more help I know one can disable ion-slide-box with $ionicSlideBoxDelegate.enableSlide(false);

My question now is how can you do that for ion-slides that you suggested?

10

According to the api doc from idangero :

mySwiper.lockSwipeToNext() Disable (lock) ability to slide to the next slides
mySwiper.unlockSwipeToNext() Enable (unlock) ability to slide to the next slides

mySwiper.lockSwipeToPrev() Disable (lock) ability to slide to the previous slides
mySwiper.unlockSwipeToPrev() Enable (unlock) ability to slide to the previous slides

mySwiper.lockSwipes() Disable (lock) ability to change slides
mySwiper.unlockSwipes() Enable (unlock) ability to change slides