Vue中图片的加载方式
阅读原文时间:2022年03月30日阅读:1

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