Javascript - Проблемы с настройкой фонового изображения для вновь загруженного изображения

Question

Я назвал это StackOverflow ответ 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;"> 

Но когда я нажимаю на фоновое изображение в хромированной консоли элемента он показывает изображение - поэтому изображение загружается правильно

Я не верю, что что-то не так с классом держателя изображений, так как он показывает фоновое пустое изображение перед загрузкой.

Может кто-нибудь, пожалуйста, дайте мне знать, как я могу поступать неправильно.

Также существует ли какой-либо риск для безопасности, если отображаемое фоновое изображение показывает поток ascii?

Answer 1

Это потому, что ваше изображение пустым. У него нет атрибута src для отображения изображения с помощью. Поэтому он не появляется. У вас есть два варианта. Добавьте src в действительный файл изображения на вашем веб-сервере или установите height и width для img.

Example

Answer 2

Свойство background-image: url() определяется и используется с URL, а не с данными необработанных изображений.

Либо сохраните это изображение где-нибудь и используйте параметр background-image: url(), чтобы указать на него, или создать сценарий, который выведет соответствующие данные с заголовками изображений и задает для этого сценария свойство background-image: url().

Подробнее об объекте CSS here.