Question

我正在尝试在div中显示背景图像，尽管它对于标准img标签来说可以正常工作，但我无法使其在div下工作。我究竟做错了什么？下面是我导入图像的位置：

import imgPackage from '../img/package.png';

下面是两段代码-div不显示任何内容，而img可以正常工作。

<div
  style={{
  height: '50px',
  width: '50px',
  backgroundImage: 'url(${ imgPackage })'
  }}
/>

<img src={imgPackage} alt="Smiley face" height="42" width="42" />

在div backgroundImage中，我尝试了以下操作，但没有成功

backgroundImage: 'url(${ imgPackage })'
backgroundImage: 'url('+{ imgPackage }+')'
backgroundImage: 'url(../img/package.png)'

我在做什么错？谢谢！

Answer 1

您正在尝试使用模板文字，但您使用的是单引号而不是反引号。

模板文字由反引号（``）（重音）括起来，而不是双引号或单引号。模板文字可以包含占位符。这些由美元符号和大括号（$ {expression}）表示。

— Template literals on MDN

<div
  style={{
    ...,
    backgroundImage: `url(${imgPackage})`
  }}
/>

Answer 2

尝试使用它。单引号上不能使用$ {}语法。它可以与``back tick

一起使用

backgroundImage: `url(${ imgPackage })`
backgroundImage: 'url('+ imgPackage +')'

Answer 3

您的任何尝试都是错误的。进行一些更改后，以下变体将起作用：

如果您喜欢ES6模板文字，则应使用反引号将其括起来：

backgroundImage: `url(${ imgPackage })`;

如果您喜欢纯字符串，则无需在url()内添加额外的单引号：

backgroundImage: 'url( + { imgPackage } + )';

这种情况可能与您的webpack等中的适当url-loader一起使用。请考虑使用上面的2个示例。

backgroundImage: 'url(../img/package.png)'

使用REACT在div中显示背景图片的问题

3 个答案: