Vue-loader: v-bind:src Doesn't respect webpack aliases

[TheVexatious]

Version

12.2.2

Reproduction link

Can't reproduce online. (webpack needed)

Steps to reproduce

1. Using webpack, create an alias @ to a specific directory. (like an assets folder)
2.

<template>
  <img v-bind:src="foo">
</template>

<script>
export default {
  data () {
    return { foo: '~@/somePic.png' }
  }
}
</script>

Above doesn't work. The image is not displayed.

<template>
  <img src="~@/somePic.png">
</template>

However, this works perfectly.

What is expected?

The image source path to be replaced with the variable stored with vue ("~@/somePic.png") and parsed using webpack.

<img v-bind:src="foo">
into
<img v-bind:src="path/to/assets/somePic.png">

What is actually happening?

The image source is left exactly with the variable stored in vue and not parsed with webpack.

<img v-bind:src="foo">
into
<img v-bind:src="~@/somePic.png"> (and not parsed by webpack)

[qinhuaihe]

I meet this problem , too.

[nickmessing]

It can't, expression inside v-bind is executed in runtime, webpack aliases work in compile time.

[TheVexatious]

I see, that makes sense. Apparently the alternative method for this was to just wrap the aliased file path in require like require('~@/somePic.png')