未显示Base64 webpack url加载器编码图像
未显示Base64 webpack url加载器编码图像
提问于 2017-04-16 21:44:59
我在向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"
}谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2017-04-16 21:53:11
在生成的DOM中，我可以看到多行base64内容。
确保在base64 uri中的任何换行符之前放置一个反斜杠\。
您可以尝试任何较小的bas64 uri图像作为测试或检查background变量是否有任何换行符。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43437897
复制相关文章
相似问题
腾讯云开发者
