现在显示Base64编码图像

我在添加背景图像到我的反应（引导程序）项目时遇到问题。现在显示Base64编码图像

我已经找到许多关于使用url/file加载器加载和编码图像为base64字符串然后将它们添加到组件样式的信息。

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

上如此相似的问题（比如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的屏幕截图：

的屏幕截图显示字符串中的图案，其中我发现可疑的基于64串进一步端瓦特ith'='。其他SO帖子（2）建议该字符串应以'=='结尾。然而，这篇文章已经有几年了，并且涉及到一个铬版的bug。我也尝试过Firefox并在最后添加'='，但它在两个浏览器中都没有做任何事情。

装载机在配置的WebPack添加如下：

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

感谢您的帮助。

来源

2017-04-16 Coeus

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

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

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

来源

2017-04-16 13:53:11 Hossam

我不认为字符串中有换行符。多线只是铬的分界线。控制台日志（background.split（“\ n”）。）返回1。 – Coeus

现在显示Base64编码图像

回答

相关问题