1、项目环境

vue-cli搭建的项目结构

2、问题

1、v-bind动态绑定<img>标签的src属性时，加载static文件夹中的图片可以正常显示,但是的加载的assets文件夹中的图片就不行了

2、普通非动态绑定的src属性可以加载assets资源文件夹下的图片

3、详细描述

刚学了点vue的基础知识，想给自己写一个组件，组件中有标签我想在使用组件的时候去设置要使用的图片，因此我就通过v-bind动态绑定src属性通过props属性传入图片地址，没想到此时我已经深陷泥坑了。

如下是我最开始的写法（图片不会显示）

<base-user-img url="../../assets/logo.png"></base-user-img>

<template>  
    <img :src="url" />
</template>
<script>
    export default {  
    name: "BaseImg",  
    props: {    
        url: {}  }
    };
</script>

//最终浏览器渲染时图片并不会显示（我发现这个图片地址webpack没有给我处理）
<img src="../../assets/logo.png"  >

当我不动态绑定src是同样的地址是可以显示图片的

<template>  
    <img :src="../../assets/logo.png" />
</template>

//此时图片正常显示地址也变了
<img src="/img/logo.82b9c7a5.png">

注意此处我是用的是本地图片，当我使用网络图片时并没有这个问题那么问题来了当我们动态绑定地址的时候难道webpack没有帮我们处理文件路径吗？

小朋友你是否有很多问号？？？？？？？

然后看了一些文章大概是这么说的

图片在assets文件夹中的情况：在项目编译的过程中会被webpack处理解析为模块依赖 webpack中会将其中图片当做模块来用，加载图片模块好像就是得通过webpack的url-loader加载器来实现，然后url-loader好像是解析不了动态绑定的src的导致最终显示的地址是未处理的地址（也就是我说的地址还是一个相对地址）因此动态绑定src时要通过加载模块的方式去加载这个图片使用require(“ ”)

图片在static文件夹中的情况：在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方，不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。将图片放到static目录下，当做第三方文件加载不让webpack去处理他，引用的时候写成绝对路径因此动态绑定src时直接写static目录下的绝对路径

今天比较头疼先到这吧