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

阅读 5.4k
评论
    2 个回答
    • 6.7k
    • 因为@是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="">

      也可以这样使用:

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

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

        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章