未显示Base64 webpack url加载器编码的图像

Question

我在向我的react（bootstrap）项目中添加背景图像时遇到问题。

我已经找到了很多有关使用url /文件加载器将图像加载和编码为base64字符串，然后将其添加到组件样式的信息。

但是，我的base64编码的背景图像未显示。虽然正确加载。

关于SO的类似问题（例如0）提示编码错误（例如说必须对字符串进行拍打。但是我不更改加载程序返回的字符串...

这里是相关的jsx代码：

var background = require('url-loader!./../images/bg_1.jpg')

export default class MainView extends React.Component {
  render() {
    var s = {
      backgroundImage: 'url(' + background + ')',
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat",
      width: "600px",
      height: "400px"
    }

    return  (
      <div id="MainView" style={s}>     
      </div>
    );
  }
}

以下是生成的DOM的屏幕截图：

屏幕快照显示了字符串中的模式，我发现这很可疑。 base64字符串进一步以'='结尾。其他SO帖子（2）建议该字符串应以'=='结尾。然而，这篇文章已有很长的历史了，并且是关于chrome的错误。我也尝试过firefox并在末尾添加“ =”，但在两种浏览器中均不起作用。

加载程序如下所示添加到webpack配置中：

{
  test: /\.jpg/,
  exclude: /node_modules/,
  loader: "url-loader"
}

感谢您的帮助。

Answer 1

在生成的DOM中，我可以看到多行base64内容。

请确保在base64 uri中的任何换行符之前，加一个反斜杠\。

您可以尝试使用任何小的bas64 uri图像作为测试或检查background变量是否具有任何换行符。