Vue中图片的加载方式

一、前言

VUE项目中图片的加载是必须的，那么vue中图片的加载方式有哪些呢，今天博主就抽点时间来为大家大概地捋一捋。

二、图片的加载方法

1、在本地加载图片(静态加载)

• 图片存放assets文件夹中的img文件下

• 图片的加载配置方式

  方式一：使用import方式导入，然后使用v-for进行遍历

  <template>	<el-carousel      :interval="4000"      type="card"      height="200px"      indicator-position="none">      <el-carousel-item v-for="item in imgList" :key="item">        <img :src="item" />      </el-carousel-item>   	 </el-carousel>	</template><script>    import banner1 from "@/assets/img/banner1.jpg";	import banner1 from "@/assets/img/banner2.jpg";	import banner1 from "@/assets/img/banner3.jpg";	export default{        data(){            return{                imgList:[banner1,banner2,banner3],            }        }    }</script>

  方式二、使用require方式导入，然后使用v-for进行遍历

  <template>	<el-carousel      :interval="4000"      type="card"      height="200px"      indicator-position="none">      <el-carousel-item v-for="item in imgList" :key="item">        <img :src="item" />      </el-carousel-item>   	 </el-carousel>	</template><script>	export default{        data(){            return{                imgList:[                     require("@/assets/img1/banner1.jpg"),        			require("@/assets/img1/banner2.jpg"),        			require("@/assets/img1/banner3.jpg"),                ],            }        }    }</script>

• 注：这里推荐使用方式二，因为我们VUE文件在后期打包的时候是通过webpack解析的，它会把我们当前的地址解析为字符串，使得浏览器是无法拿到图片的实际地址的，使用require直接以变量的方式赋值给浏览器。更多关于require的使用可以去看看这篇Vue中import和require的对比博文。

2、动态加载图片

• 配置文档build/webpack.base.conf.js

  {  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  loader: 'url-loader',  exclude: [resolve('src/icons')],  options: {   limit: 10000,   name: utils.assetsPath('images/[name].[hash:7].[ext]')  }  }

• 请求数据

  created() { const that = this this.request({  url: '/sysInfoFront/list',  method: 'get' }).then(function(res) {  const resData = res.data  if (resData.code === 100) {  const avatear = resData.data.avater  resData.data.avatar = avatear  that.formData = resData.data  } }) },

以上内容就是vue中图片的请求方式了，如果有哪些不足的地方希望小伙伴们多提提提意见，大家共同进步！！