Блог

Я пытаюсь добавить фоновое изображение в свое приложение

 #app {
  background-image: url('./assets/cold-bg.jpg');
}
 

затем я получаю эту ошибку

 * ./assets/cold-bg.jpg in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vueamp;type=styleamp;index=0amp;id=7ba5bd90amp;lang=css
 

Я быстро исправляю эту ошибку, которую я всегда использую, загружая изображение с вычисляемым свойством, при таком подходе JavaScript получит правильный путь для меня, независимо от того, насколько вложены мои компоненты.

Например.

 computed: {
    getImage() {
        return "background-image:url("   require("@/assets/cold-bg.jpg")   ")";
    }

 

Затем в вашем шаблоне вы можете использовать его следующим образом:

 
<template>
    <div :style="getImage"></div>
</template>

 

Вы можете заметить, что я перешел @/ к образу src, который сообщает vue компилятору искать в папке src.

Вы можете использовать methods вместо вычисляемого свойства, это поможет загрузить src изображения, который вы передаете в качестве параметра.

Например.

 
methods: {
    getImage(path) {
        return "background-image:url("   require("@/"   path)   ")";
    }

 

В вашем шаблоне передайте правильный путь к методу.

 <template>
    <div :style="getImage('assets/cold-bg.jpg')"></div>
</template>