Этот подход немного более сложный. Здесь вы сохраняете все предварительно загруженные изображения в контейнере, может быть div. И после того, как вы сможете показать изображения или перенести их в DOM в правильное положение.
function preloadImg(containerId, imgUrl, imageId) {
var i = document.createElement('img'); // or new Image()
i.id = imageId;
i.onload = function() {
var container = document.getElementById(containerId);
container.appendChild(this);
};
i.src = imgUrl;
}
Попробуйте здесь , я также добавил несколько комментариев
Выяснили два способа сделать это: 1. Вместо href="image.png"
используйте href="/image.png"
, поэтому путь к изображению будет абсолютным и доступным с каждой страницы. Но эта опция не работает, если приложение не находится в корневом каталоге (как в моем случае). 2. Загрузите изображения из папки ресурсов через href="@/assets/image.png"
. Для стилей и динамических путей можно использовать :style="{backgroundImage: ``url('${require('@/assets/boat.jpg')}')``}"
.
Надеюсь, это поможет вам ^^