reactjs - 无法在 IonCard Ionic4-React 中设置背景图像
问题描述
我无法在我的 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”标签也可以正常工作,但我希望图像在背景中......
解决方案
考虑到图像在用作源时有效,我假设 item.image 是一个 url。
你能把这个值包装在url()
像这样:
style={{
backgroundImage: `url(${item.image})`,
backgroundColor: "yellow",
}}
推荐阅读
- git - Visual Studio:由拉取请求创建和删除的存储
- excel - 访问位于 sftp 中的 excel 信息
- jquery - 如何从客户端 jQuery 上传 25 GB 以上的大文件?
- reactjs - React Native - 在嵌套的文本元素上显示:'None'
- python - 如何在运行 python wsgi 服务器上附加共享目录?
- php - PHP/Laravel 中数组的 ->where() 替代方案
- javascript - 从功能组件发送功能道具时防止重新渲染
- pdf - pdf中的Birt导出不会自动换行长行
- c# - 如何在 c# 的 azure 管道中运行 Selenium UI 测试。OpenQA.Selenium.WebDriverException :对远程 WebDriver 服务器的 HTTP 请求以获取 URL
- security - 为什么 aqua microscanner 在我的 Jenkinsfile 中失败?