Vue组件里的图片路径问题

Question

用vue-cli 脚手架构建的项目，sytle 是用less,组件里面用less mixin 传入url 引用背景图，地址就是和组件同一目录。编译后的路径不对。

项目目录

mixin.less

header.vue

直接报错,路径指向了less目录

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-7baeb122!./~/less-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue
Module not found: Error: Can't resolve '../../common/less/[e-mail]' in 'E:\project\sellapp\src\components\header'
 @ ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-7baeb122!./~/less-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue 6:749-790
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-7baeb122!./~/less-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue
 @ ./src/components/header/header.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

请问如何解决该问题 ，最好不要加那么一长串路径

Answer 1

把图片放到 static 目录下，
然后把 .bg-image 内的url改为相对于 static 的路径试试

Answer 2

楼主解决了么？我也是遇到了这个问题。。求解决方法

Answer 3

你用的哪个图片的loader？

建议你使用webpack的alias去尝试解决下

Answer 4

楼主解决这个问题了吗？用less遇到这个坑了

Answer 5

图片没有找到

Answer 6

.bg-image('/brand')试试看。

Answer 7

也碰到类试的问题。可以试下background-image: url改为双引号""。

以下是我的配置，测试通过。

.forRankIcon(10);
.forRankIcon(@n, @i: 1) when (@i =< @n) {
  .iconrank@{i} {
    .common-rankicon;
    display: block;
    background-image: url("~assets/image/iconrank@{i}@2x.png");
  }
  .forRankIcon(@n, (@i + 1));
}

版本信息

    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.8.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "glob": "^7.1.2",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",

Answer 8

文件夹地址及引用~这么写没报错了~能看到图片~
HBuilder错误可以无视~因为再style中写了less,可能是编辑器不支持标签~实际上是没有错误的~各位放心哈~

Answer 9

按着这个编译后的build.js的相对路径来。:)

Answer 10

看来不少用less的都有这个问题啊。

Answer 11

因为less会插到vue里面去，所以less对应的图片地址应该是根据xxx.vue找到图片的路径,这样才可以