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

Posted 2023-02-21

【中文标题】使用 REACT 在 div 中显示背景图像的问题

【英文标题】：Issue with displaying background image in a div with REACT

【发布时间】：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    />

在 div backgroundImage 中，我尝试了以下操作，但均无济于事

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

我做错了什么？ 谢谢！

【问题讨论】：

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

【参考方案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)`
  
/>