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目录下的绝对路径
今天比较头疼先到这吧
