VUE的常见问题

前言

该文章记录一些工作中遇到的vue常见问题，以及一些解决办法，慢慢将会添加更多的问题记录，所有内容均从网上整理而来，加上自己的理解做一个整合，方便工作中使用。

1.vue中动态引入图片需要使用require

<img :src="imgUrl" alt="">

//data中
data(){
  return{
    imgUrl:require("../assets/images/eq.png"), //有效
    //imgUrl:"../assets/images/eq.png",        //无效
  }
}

原因：（详细讲解）

动态添加的src被当成静态资源处理了，没有进行对应的编译，所以编译后图片的地址和名称变化了，但是动态添加的src还是旧的，所以找不到该资源。

1)静态资源和动态资源

静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。对于vue项目来说，静态资源就是存放在项目中的资源，不需要通过发送请求获取，比如在assets文件下的图片、音频、视频、css、图标等

动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理

2)动态添加的src为什么会被当做静态资源？

vue项目会打包，打包过程就是将vue文件编译成html、css、js文件的过程，然后在浏览器上运行，如果动态加载的src没有使用require引入，编译出来会是什么呢？

//1.使用动态加载，编译的结果
<img :src="'../assets/logo.png'" alt="">

//最终编译的结果（在浏览器上）,图片是不能被打开的
<img src="../assets/logo.png" alt="logo">


//2.直接引用静态地址，不用动态添加，编译的结果
<img src="../assets/logo.png" alt="">

//最终编译的结果（在浏览器上）,图片正常显示
<img src="/img/logo.6c137b82.png" alt="logo">

引用静态地址，编译的结果是图片的路径和图片的名称都发生了变化；而动态添加的src还是原来的地址和名称，但是图片本身已经被编译了，改变了名称和位置，所以动态添加的src还是原来的地址，当然不是正确的地址和名称。