Menu
What’s the best practice for image assets in Ionic 2? I have a bunch of SVGs I want to use as non-system icons. I found some older tips on using Gulp but it seems Ionic team has decided on Rollup as the build tool of choice, no docs on this so far.
Somebody told me to just add them to www/img. Any downsides?
355
In ionic 2, the src/assets folder is meant for images and fonts. This is what the ionic team says in the guide to modify an existing ionic project : Move www/img to src/assets/img. Move any other resources you have in www/ to src/assets/.
So doc suggest to use Glide library. If you want to load image from assets folder then using Glide library help you alots easier. In case not worked by above method : Replace this object with view object from below code (only if you have Inflate method applied as below in your code). Show activity on this post.
So Let’s start… 1) Save Ionic’s assets folder media like images or any other file to a phone so that user can open with phones default viewers. 2) We will share Ionic’s assets folder images social networks like Whatsapp, Facebook or Gmail.
In this example application, we will add an image in application src folder at path “ ~src/assets/images/logo.jpg ” then using File we will show the image using Photo-viewer plugin. Also Read: Ionic 3 – Implement Image Viewer for Photos in the Assets folder. Create new Ionic 4 application by running the following commands
So with Ionic2 even though u code in the app folder ultimately it compiles and runs from the www folder. Technically speaking your ionic app still runs from the www folder, because of that reason you have to add your images to the www folder. @YokeshVaradhan where do you put the image?
However still most of the browsers doesn't support this new javascript standards , hence Ionic uses a concept called transpiler to change the new javascript code to old fashion javascript code so that browsers can understand. So with Ionic2 even though u code in the app folder ultimately it compiles and runs from the www folder.
Placing your images in www/img sounds like a good ideal but it will only work when serving locally using ionic serve.
When building your app, the www/img will get deleted unless you make a gulp task to copy the images from the folder you want to the www/build folder as shown in this post.
Images used in html files should be in src/assets/img(recommended) and not www/assets/img(obselete). Image tags would then look like this :
<img src="assets/img/yourimage.jpg" alt="your image"> In ionic 2, the src/assets folder is meant for images and fonts.
This is what the ionic team says in the guide to modify an existing ionic project :
Move www/img to src/assets/img.
Move any other resources you have in www/ to src/assets/.
71
[...] it seems Ionic team has decided on Rollup as the build tool of choice, no docs on this so far.
Seems like you're asking how to manage images with the new RC.0
Just like you can see in the conference app the images are stored in src/assets/img and then you can add them to your html code like this:
<img src="assets/img/myImg.png"> This is one of the steps mentioned in the Modifying your Existing Project guide (step 31 to be precise), so I guess this is what Ionic team recommends.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
