Question

我想将图像设置为css文件，但出现错误，提示无法编译为vue新手。

我尝试了@，以便从src进行相对寻址

body{
  background: url("@/image/background.png");
}

但是，无论如何我尝试尝试另一种方法都无法编译，这表明错误再次无法编译。

body{
  background: url("../image/background.jpg");
}

整个错误是：

Failed to compile.

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module not found: Error: Can't resolve '../image/background.jpg' in '/home/sina/WebstormProjects/landing-vue/src'
 @ ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 7:65-99
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

我的CSS文件地址：

src/assets/stylesheet/style.scss

我的图像文件地址：

src/assets/image/background.jpg

Answer 1

您的图像路径实际上不是：

body{
  background: url("@/assets/image/background.jpg");
}

您说图像路径为src/assets/image/background.jpg。

@是src/的别名，但是您仍然需要进入assets文件夹。

我也将.png更改为.jpg。还要检查您的文件扩展名。

如果@文件中的.scss别名不适合您，只需尝试相对链接即可：

body{
  background: url("../image/background.jpg");
}

显然，您需要根据放置样式表的位置来调整路径。

在vue.js中寻址到CSS时无法编译

1 个答案: