2013-06-19 2 views
0

에 대한 배경 이미지 설정과 관련된 문제는 내가 새로 업로드 이미지에 배경 이미지를 설정하려면이 유래 응답 How to preview an uploaded image as the background image of a div?자바 스크립트 - 새로 업로드 된 이미지

언급했다. 그래서 이미지가 제대로

을 업로드 - 나는 크롬 콘솔 요소의 배경 이미지를 클릭하면 그러나

<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;"> 

를이 이미지를 보여줍니다 -

하지만 나를 위해 작동하지 않습니다이 그것을 보여줍니다 무엇인가

imageholder 클래스에 문제가 있다고 생각하지 않습니다. 업로드하기 전에 배경 빈 이미지를 보여주기 때문입니다.

누군가 내가 잘못하고있는 것으로 알려 주시기 바랍니다.

표시되는 배경 이미지에 아스키 스트림이 있으면 보안 위험이 있습니까?

+0

"나를 위해 작동하지 않는다"는 말은 무엇을 의미합니까? – Jacob

답변

0

이미지가 현재 비어 있기 때문입니다. 이미지를 표시하는 데는 src 속성이 없습니다. 그러므로 그것은 나타나지 않습니다. 두 가지 옵션이 있습니다. src을 웹 서버의 유효한 이미지 파일에 추가하거나 imgheightwidth을 설정하십시오.

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

가능한 예는 아니지만 보편적으로 지원되지는 않으며 문서화되지 않았습니다. 내 솔루션이 표준이며 out-of-the-box에서 작동하므로 downvote의 가치가 있는지 확신하지 못합니다. – jterry

관련 문제