Как переместить background в другой блок?

Question

[Анастасия]

есть инпут который загружает изображения в блок как background

<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.attached_photo_mess_block').show();
$('#imagePreview').css('background-image', 'url('+e.target.result +')');
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
    readURL(this);
});
</script>

Есть идея чтобы при нажатии на кнопку этот background переносился в другой блок

<script>
$(document).ready(function()
{
$('#sendimage').on('click', function () 
{
        $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="sender-text-image"><div id="imagePreview"></div></div></div>');
        $('.attached_photo_mess_block').hide();
});
});
</script>

как это реализовать если картинка загружается не с сервера, а с компьютера/телефона пользователя?

Answer 1

[Даниил Братухин]

Источник изображения здесь роли не играет, потому что вы работаете с data url. Мне кажется, проблема во втором фрагменте, потому что там создаётся новый элемент без фона. Используя ваш подход, должно было получиться что-то такое:

const url = $('#imagePreview').css('background-image')

const newMessage = $(`
  <div class="user_two_message col-xs-12 col-sm-12">
    <div class="sender-text-image">
      <div id="imagePreview" style="background-image: ${url}"></div>
    </div>
  </div>
`)

$('.message-screen').append(newMessage)

Обратите внимание, что как мой, так и ваш код приведут к дублированию идентификатора imagePreview и непредсказуемому поведению при втором и дальнейших запусках. Пожалуйста, примите меры :)