一、img元素引用

在Vue中，你可以使用ref属性来引用img元素。ref属性允许你直接访问DOM元素，从而进行操作。以下是一个简单的示例：

<template>
  <img src="example.jpg" ref="myImage">
</template>

在上面的代码中，ref="myImage"将引用名为myImage的img元素。在Vue组件的mounted生命周期钩子中，你可以通过this.$refs.myImage来访问这个元素。

export default {
  mounted() {
    this.$refs.myImage.src = 'new-image.jpg';
  }
}

二、图片懒加载

首先，你需要安装vue-lazyload插件：

npm install vue-lazyload --save

然后，在Vue主实例中引入并使用该插件：

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload);

接下来，在模板中使用v-lazy指令：

<template>
  <img v-lazy="imageSrc" alt="描述">
</template>

三、图片优化技巧

<img src="example.jpg" srcset="example-2x.jpg 2x, example-3x.jpg 3x" alt="描述">

四、总结