vue 中引入图片

当前webpack配置

当前的webpack.base.conf.js：

1
2
3
4
5
6
7
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src')
  }
}

静态路径

~

模板代码为：<img class="logo" src="~assets/logo.png">

编译报错:

1
2
3
4
5
6
7
ERROR  Failed to compile with 1 errors  

This dependency was not found:

* assets/logo.png in ./~/vue-loader/lib/template-compiler?{"id":"data-v-5e23f6c6","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./~/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/main/card.vue

To install it, you can run: npm install --save assets/logo.png

..

模板代码为：<img class="logo" src="../../assets/logo.png">

成功

@

模板代码为：<img class="logo" src="@/assets/logo.png">

编译成功，页面报错:

1
GET http://localhost:8080/@/assets/logo.png 404 (Not Found)

~@

模板代码为：<img class="logo" src="~@/assets/logo.png">

成功

动态路径

~

模板代码为：

1
2
3
4
5
6
7
<img class="logo" :src="attachmentUrl">

data () {
  return {
    attachmentUrl: require('~assets/logo.png')
  } 
}

编译报错：

1
2
3
4
5
6
7
ERROR  Failed to compile with 1 errors 

This dependency was not found:

* ~assets/logo.png in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/main/card.vue

To install it, you can run: npm install --save ~assets/logo.png

..

模板代码为：

1
2
3
4
5
6
7
<img class="logo" :src="attachmentUrl">

data () {
  return {
    attachmentUrl: require('../../assets/logo.png')
  } 
}

成功

@

模板代码为：

1
2
3
4
5
6
7
<img class="logo" :src="attachmentUrl">

data () {
  return {
    attachmentUrl: require('@/assets/logo.png')
  } 
}

成功

~@

模板代码为：

1
2
3
4
5
6
7
<img class="logo" :src="attachmentUrl">

data () {
  return {
    attachmentUrl: require('~@/assets/logo.png')
  } 
}

编译报错：

1
2
3
4
5
6
7
ERROR  Failed to compile with 1 errors 

This dependency was not found:

* ~@/assets/logo.png in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/main/card.vue

To install it, you can run: npm install --save ~@/assets/logo.png