Vue中圖片的載入方式

• 2022 年 3 月 27 日
• 筆記
• vue小知識, 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中圖片的請求方式了，如果有哪些不足的地方希望小夥伴們多提提提意見，大家共同進步！！