如何使用背景图像在 div 中设置图像？答案

【问题标题】：How to set up an image in an div using backgroundImage?如何使用背景图像在 div 中设置图像？
【发布时间】：2022-07-11 19:41:40
【问题描述】：

我有一个 div，我必须在其中使用 backgroundImage 显示照片。我有一个对象，其中有一个图像的 URL 路径，我稍后会从对象返回。我做了以下代码：

import React from 'react' 
import './user.css';


 const User = ({name,img,position,names}) => {
return ( <div className = 'card'>
    <div id='image' style={{ 
  backgroundImage: `url({${img}})` 
}}></div>
    <p className = 'card_name' id = 'based'>{name}</p>
    <p className = 'card_position'>{position}</p>
    <p>{names + ' '}</p>
</div>
 );
}

export default User;

当我尝试运行页面时，我没有任何错误，但我的图像没有出现在页面上。我的问题似乎是什么？

【问题讨论】：

请console.log URL 并检查该 URL（如果在另一个浏览器选项卡中打开）是否显示图像。然后检查 CSS 是否让图像具有正确的大小...
图片尺寸不合适，无法在页面上显示，这是我的错。但是有什么方法可以使图像大小适合容器，似乎在 img 标签上很容易工作，但在我的 div 标签上不起作用。

标签： reactjs image

【解决方案1】：

在传递给 URL 的值上有额外的括号，试试这个：

backgroundImage: `url(${img})`,

【讨论】：