[英]Setting inline backgroundImage is not working in React
I am using a function which will return the full path of the image.我使用的是 function,它将返回图像的完整路径。
const imagePath = (imagePath) => {
const domainPath = "http://localhost:9005/gallery/original/";
const fullImagePath = domainPath + imagePath;
return fullImagePath;
};
Now If I use below code, it will work and show image on browser:现在如果我使用下面的代码,它将工作并在浏览器上显示图像:
<img
src={imagePath(item.mediaPath)}
alt="cow images"
/>
But If I use below code, it will NOT work:但是如果我使用下面的代码,它将不起作用:
<div
className="bg-image-blur"
style={{
backgroundImage:
"url(" +
imagePath(item.mediaPath) +
")",
}}
></div>
Please see given below image from my inspect element.请从我的检查元素中查看下图。 Style is added to the element:
样式添加到元素:
and It will also not work if I don't use imagePath
function:如果我不使用
imagePath
function,它也不会工作:
<div
className="bg-image-blur"
style={{
backgroundImage:
"url(" +
"http://localhost:9005/gallery/original/" +
id.mediaPath +
")",
}}
></div>
What is the issue?问题是什么?
It does not work because you haven't put ''
for url
.它不起作用,因为您没有为
url
''
。 And I'd suggest you use template literals for your string concat instead for easier look而且我建议您为字符串连接使用模板文字,而不是为了更容易看
<div
className="bg-image-blur"
style={{
backgroundImage: `url('${imagePath(item.mediaPath)}')`,
}}
></div>
You can check this document to understand how background-image
looks like with url
您可以查看此文档以了解
url
background-image
的外观
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.