Cannot set background-image in IonCard with inline styles

I am not able to set background image in my ioncard component . Here is my code

    <IonRow>
                  {allCategories.categories.map((item, index) => {
                    return (
                      <IonCol size="6" size-md="4" size-lg="3" key={index}>
                        <IonCard
                          onClick={() => getProducts(item)}
                          style={{
                            backgroundImage: `${item.image}`,
                            backgroundColor: "yellow",
                          }}
                        >
                          {/* <IonImg src={item.image} className="catImage" /> */}.  //this works fine but i want the image to be in background
                          <IonItem>
                            <IonLabel>{item.title}</IonLabel>
                          </IonItem>
                        </IonCard>
                      </IonCol>
                    );
                  })}
                </IonRow>

backgroundColor:“yellow”

seems to work fine as this was just for checking, but i do not see anywhere the background image. “IonImage” tag also works fine but i want the image to be in background…

1 post - 1 participant

Read full topic