首页 > 其他分享> 文章详细

Vue中图片的加载方式

2022-03-27 13:33:37 阅读：137 来源： 互联网

标签：Vue assets require jpg banner1 加载 data 图片

一、前言

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中图片的请求方式了，如果有哪些不足的地方希望小伙伴们多提提提意见，大家共同进步！！

标签：Vue,assets,require,jpg,banner1,加载,data,图片
来源： https://www.cnblogs.com/cyy22321-blog/p/16062581.html