我正在try 访问一个静态图像,以便在React的内联backgroundImage属性中使用.不幸的是,我对如何做到这一点已经一窍不通了.

总的来说,我以为你只是做了如下事情:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

这适用于<img>个标签.有人能解释一下这两者的区别吗?

例子:

<img src={ Background } />就行了.

非常感谢.

推荐答案

backgroundImage属性中的花括号是错误的.

可能您正在使用webpack和图像文件加载程序,所以背景应该已经是一个字符串:

您还可以使用以下ES6字符串模板来实现相同的效果:

backgroundImage: `url(${Background})`

Javascript相关问答推荐

如何在不使用类型化数组的情况下将32位浮点数按位转换为整值?

如何使用JavaScript动态地将CSS应用于ToDo列表?

使用JavaScript重命名对象数组中的键

基于变量切换隐藏文本

通过嵌套模型对象进行Mongoose搜索

无法在nextjs应用程序中通过id从mongoDB删除'

React Code不在装载上渲染数据,但在渲染上工作

将2D数组转换为图形

colored颜色 检测JS,平均图像 colored颜色 检测JS

引用在HTMLAttributes<;HTMLDivElement>;中不可用

如何在DYGRAPS中更改鼠标事件和键盘输入

AJAX POST在控制器中返回空(ASP.NET MVC)

第一项杀死下一项,直到数组长度在javascript中等于1

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

对具有相似属性的对象数组进行分组,并使用串连的值获得结果

如果NetSuite中为空,则限制筛选

顶点图使用组标签更新列之间的条宽

我怎样才能得到一个数组的名字在另一个数组?

使用createBrowserRoutVS BrowserRouter的Reaction路由

如何使pdf.js上的文本呈现为可选?