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

Question

我试图在div中显示背景图像，虽然它适用于标准的img标签我不能使它适用于div。我究竟做错了什么？以下是我导入图像的位置：

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

下面是2段代码 - 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一起使用。考虑使用上面的两个例子。

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