vue.js - Vue img使用@路径报错，import中使用正常

问题描述

问 题

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)
为啥会这样？？？

解决方案

• 因为@是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="">

这篇关于vue.js - Vue img使用@路径报错，import中使用正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！