Nuxtjs — изображения можно загружать из HTML, но не из файлов css/scss
Изображения на моей странице можно прочитать из файла HTML (например, когда у меня есть тег src и я ввожу относительный путь к изображению). Например:
<span class = "image"><img src = "../assets/theme/images/pic01.jpg" alt = ""></span>
Но когда я загружаю изображение в качестве фона через файлы css/scss, они не загружаются. Например, это не загружает изображение:
background-image: url("/assets/theme/css/images/close.svg");
@include vendor('background-image', ('linear-gradient(to top, #{$overlay}, #{$overlay})', url("/assets/theme/images/banner.jpg")));
background-image: -moz-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("/assets/theme/images/banner.jpg");Я установил file-loader и url-loader. Если я нажму file-loader и url-loader в разделе расширения в nuxt.config, то изображения тоже не будут загружаться из HTML.
Ответы 2
Вы используете абсолютный путь в файлах CSS, а nuxt их не переводит. Измените адрес, чтобы использовать псевдоним @:
background-image: url("@/assets/theme/css/images/close.svg");
@ должен быть первым сегментом пути. Вы либо используете относительные пути, либо используете @ в начале пути.
В css я написал background: url('@/assets/images/something.png') В комментарии вверху показана ошибка nuxt
Это сработало для меня либо из активов, либо из статической папки
.class-name {
background-image: url('~static/images/image-name.jpg');
}
.class-name {
background-image: url('~/static/images/image-name.jpg');
}
.class-name {
background-image: url('~@/static/images/image-name.jpg');
}
ModuleNotFoundError: модуль не найден: ошибка: не удается разрешить './@/assets/images/something.png'