Vue img使用@路径报错，import中使用正常

Question

1.webpack.base代码：

 extensions: ['.js', '.vue', '.json'],
 alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src')
    }

2.img报错代码：

       <div class="m-icon-head">
                <img src="@/assets/head.png" alt="">
            </div>

3.import正常代码：

index.js
import manageJob from '@/pages/jobhunter/Job/manage-job';
import loginSelect from '@/components/index/login_select';
import phoneLogin from '@/components/index/phone_login';
import passwordLogin from '@/components/index/password_login';

组件：

import mHeader from '@/components/header/header';
import mContent from './mine-content';

错误提示：GET http://localhost:8880/@/asset... 404 (Not Found)
为啥会这样？？？

Answer 1

• 因为@是webpack中定义的别名，在JS中可以使用此别名，代替resolve('src')指向的路径

• import xxxxxx是JS语法，所以可以使用@别名

• 而<img src="@/assets/head.png" alt="">标签中，src作为一个属性值，其值是字符串并非是JS，所以不能用@别名

• 参见https://github.com/vuejs/vue-...

• 这个方法我还没试验过，不过据上面的Issue所说，url地址前加~标记可以让解析器将地址中的别名解析出来

• Issue中提出的方案是：<img src="~@/assets/head.png" alt="">

Answer 2

也可以这样使用:

<img :src="require('@/assets/head.png')" alt=""> //注意将src当中需要bind

不过似乎上面的方式更雅。