Как я могу загрузить статический образ из функции jQuery для приложения весенней загрузки

Question

Я добавил свое изображение в src/main/resources/static/images/myimage.

Если я предоставлю ниже в html напрямую, , тогда изображение будет загружено :

<div id="testing"> 
    <div class="card-post__image" 
         style="background-image: url('images/myimages/default-user-imge.jpeg');">
    </div>
</div>

Но если добавить этот HTML-код с помощью jQuery, то изображение не загружается.Это потому, что изображение находится в папке static?

Answer 1

Чтобы использовать background-image с url путем, вам необходимо указать следующие свойства: ширина, высота и размер фона

$('.card-post__image')
    .css('background-image', 'url("https://www.zamzar.com/images/filetypes/jpg.png")')
    .css({ width: '100px', height: '100px', 'background-size': '100%' });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="testing"> 
    <div class="card-post__image"></div>
</div>

---

Если вы хотите проверить готовность изображения к использованию или нет, вы можете использовать Image класс:

var image = new Image();

image.onload = function () {
  $('body').append(this);
};

image.error = function () {
  console.log('ERROR!');
};

image.src = 'https://www.zamzar.com/images/filetypes/jpg.png';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>