2013-06-19 10 views
0

设置背景图片的问题我提到这个计算器响应How to preview an uploaded image as the background image of a div?的Javascript - 与新上传的图片

背景图像设置为新上传图片。

但它不为我工作 - 这是它表明:

<img id="urlimg" class="imageholder" style="background-image: url(data:image/jpeg;base64,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); background-color: transparent; background-position: 0% 0%; background-repeat: no-repeat no-repeat;"> 

然而,当我点击Chrome浏览器的控制台元素的背景图像上显示的图像 - 使图像正确上传

我不认为imageholder类有任何问题,因为它显示上传之前的背景空白图像。

有人可以让我知道我可能做错了什么。

如果正在显示的背景图像显示ascii流,那么是否存在安全风险?

+0

当你说“不适合我”时,你是什么意思? – Jacob

回答

0

这是因为你的图片目前是空的。它没有src属性来显示图像。因此它不显示。你有两个选择。将src添加到Web服务器上的有效图像文件中,或将heightwidth设置为img

Example

-1

background-image: url()的属性被定义和使用具有URL,不与原始图像数据。

无论是存储图像的地方,并使用background-image: url()参数指向它,或者创建一个脚本,将输出与图像标题相应的数据和设置background-image: url()属性表示脚本。

阅读更多关于CSS属性here

+0

[完全可能](http://css-tricks.com/data-uris/)。 [示例](http://jsfiddle.net/Cwalkdawg/w3qBv/1/) – SomeShinyObject

+0

可能但不是普遍支持 - 也没有记录,因为您的示例很快指出。不知道这是值得downvote作为我的解决方案是标准的,并将开箱即用。 – jterry