I am new to Ionic 2 and I am having some problems with images in my app.
Searching online I understood that the images must be put in the /src/assets folder inside the app. (correct?)
The images work fine using ionic serve and ionic lab commands but in the simulated devices or using Ionic View on an iPad they do not show up!
I reference the images in the code with:
<img src="../assets/img/ringing.png" class="circle_icons">
How can I solve this?
(Down are some screenshot of the problem)
Screenshot of the simulator with problems displaying images
Screenshot of the ionic serve without problems displaying images
After placing the images in your assets folder just reference them like this.
<img src="assets/images/MiTUCson-quick-search.png" alt="Consulta Rapida"
Related
Im creating a cordova app using onsenui. Have only android platform.
It loads before styles are loaded. I can see all the html file without styles for a couple of seconds.
Can i get a solution?
I just moved my wordpress website on testing host to check how the website is actually displayed in actual phone browser and it turns out that neither styles nor images are being displayed (as shown in the right side of the image).
Website on desktop browsers works normal and it chrome dev tools if setted on Nexus 5 is displaying okey (as showed in the left side of the image).
There is actualy a plugin to take care of this for you. After you have moved the local files to your actual host, run this plugin, by searching for the root of your local website and change it to the actual root of your website.
Something like this:
Local: http://localhost/my-wordpress-website/
Live: http://www.my-website.com/
<img class="logo center-block" src="http://localhost/work/zarakunst/zaratheartist/wp-content/themes/starkers-master/img/zarakunst.png" alt="ZaraKunst logo">
You need to replace http://localhost in wp-admin/options-general.php
I run my app in Ionic Framework using ionic run android.
What I need is to retrieve all the images in the sdcard of emulator and display it in my view.
I tried using camera.getPicture(), but in that function, a list of images in sdcard will be displayed first and from that list, I have to select the images that I need.
But what my requirement is that, I want all the photos from the sdcard to be displayed directly in my view. Is there any function to make it possible?
You cannot do this by using ionic framework only. Cordova is used to do this action which you need. following link may be helpful for you. :)
I am working on app where i need to download image from local using phonegap file api and then display it in application on various pages.I am using phonegap build not eclipse for build my application.
I have successfully downloaded images to SD card and display image in my pages like " file:///sdcard/project/promotion/promotion.jpg"
but it is not working properly. On some pages it works and some pages it doesn't work. I have checking path by alert and path is fine. I have checked the path by opening in browser and it works fine.
Can anyone help with this?
I am currently creating an Android application with Phonegap and I am unable to insert images to my project. I have saved my .png file in different directories and still only a question mark shows up where my image should be. I can not use images from a URL either.
To use a local image try the following.
Put your image in the /assets/www folder of the project
Then set the image tag as follows:
<img src="../www/myimage.png">
Yes, I realize this should be the identical to setting the src to "myimage.png". I cannot say the reason why this might work, but I had the exact same problem with local images on Phonegap and this fixed the issue for me. If you have them in a subdirectory, you can try adding this on to the path:
<img src="../www/mydir/myimage.png">
I also found the following syntax worked, maybe a little less clumsy looking:
<img src="./myimage.png">
Or
<img src="./mydir/myimage.png">
This was all on Android 4.0 unfortunately, I do not know for earlier versions of the OS
For me i got the solution by adding dot before the "images" folder like this
<img src="./images/bg4.jpg" />
There's a mistake I've done quite a lot.
If you add .js files to your index.html and use images in them, you need to calculate your images path from the index.html page and not from the .js file because the .js file will be interpreted in index.htm
For example, put all your images in a img/ folder next to index.html and then when you're using one of these images just do
<img src="img/YOU_IMG.png" />
There's nothing special about images in PhoneGap applications - they're web applications. If you point a desktop browser to your project folder and open the index.html, what happens with your images? If they don't show up there, they're not going to show up in the PhoneGap application.