无法在离子卡 Ionic 4- React 中设置背景图像

Question

我无法在我的 ioncard 组件中设置背景图像。这是我的代码

                 <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>

背景颜色：'黄色'

似乎工作正常，因为这只是为了检查，但我在任何地方都看不到背景图像。 “IonImage”标签也可以正常工作，但我希望图像在背景中......

Answer 1

考虑到图像在用作来源时有效，我假设 item.image 是一个 url。

你能把那个值换成url()

像这样：

 style={{
  backgroundImage: `url(${item.image})`,
  backgroundColor: "yellow",
 }}