现在显示Base64编码图像

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的一个bug。我也试过firefox并在结尾添加'='，但它在两个浏览器中都没有做任何事情。

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

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

感谢您的帮助。

Answer 1

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

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

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