Vue入门必看：轻松掌握如何在项目中添加图片

1. 准备图片资源

2. 在组件中引入图片

2.1 使用img标签

<template>
  <div>
    <img src="path/to/image.jpg" alt="描述图片">
  </div>
</template>

2.2 使用Vue的require语法

<template>
  <div>
    <img :src="imagePath" alt="描述图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagePath: require('@/assets/image.jpg')
    };
  }
}
</script>

3. 在全局样式中添加图片

<style>
/* 在你的样式文件中 */
.background-image {
  background-image: url('path/to/image.jpg');
}
</style>

然后在组件中使用类选择器：

<template>
  <div class="background-image"></div>
</template>

4. 响应式图片

<template>
  <div :style="{ backgroundImage: 'url(' + imagePath + ')' }"></div>
</template>

<script>
export default {
  data() {
    return {
      imagePath: require('@/assets/image.jpg')
    };
  }
}
</script>

5. 高性能图片加载

<template>
  <div>
    <img v-lazy="imagePath" alt="描述图片">
  </div>
</template>

<script>
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload);

export default {
  data() {
    return {
      imagePath: require('@/assets/image.jpg')
    };
  }
}
</script>

请确保在项目中安装了vue-lazyload。

总结