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

【问题标题】：Issue with displaying background image in a div with REACT使用 REACT 在 div 中显示背景图像的问题
【发布时间】：2019-02-21 02:20:06
【问题描述】：

我正在尝试在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)'

我做错了什么？谢谢！

【问题讨论】：

重复问题stackoverflow.com/questions/39195687/…

标签： javascript html reactjs

【解决方案1】：

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

如果你更喜欢 ES6 模板文字，你应该为它们使用反引号：

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

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

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

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

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

【讨论】：

【解决方案2】：

尝试使用它。在单引号上你不能使用 ${} 语法。它可以与``倒勾

一起使用

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

【讨论】：

【解决方案3】：

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

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

——Template literals on MDN

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

【讨论】：