Search code examples
htmlimagecordovaionic-frameworkpopover

Img in ionic cordova popover component does not show


I would like that when a user presses a button in the app, a popup opens. This popup shows several rounded filter options(pictures infront of an invisible checkbox ) which are are changing when pressed. Something like this:

Picture of filter options

The problem is that somehow I am not able to see the img in the popover component in ionic cordova while the popover element works fine otherwise. Is it actually possible to do that in ionic?

Here is my code snippet:

<div class="filter-buttons">
<div class="metal">
  <input type="checkbox">
  <label>test</label>
  <img src="heavy.jpg" alt="stuff" height="42" width="42"> 
</div>

I also tried it as background in css:

.metal{
    background-image: url("heavy3.jpg");
}

Solution

  • You should put the image in www/assets and add this code

    background: url(../assets/heavy3.jpg) no-repeat;
    background-size: 100% 100%;