1. 图片路径绑定方法

1.1 使用 data 属性

<template>
  <div>
    <img :src="imageUrl" alt="示例图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/your/image.png'
    };
  }
};
</script>

1.2 使用 import 引入

<template>
  <div>
    <img :src="imageUrl" alt="示例图片">
  </div>
</template>

<script>
import logo from '@/assets/logo.png';

export default {
  data() {
    return {
      imageUrl: logo
    };
  }
};
</script>

1.3 使用 require 引入

<template>
  <div>
    <img :src="imageUrl" alt="示例图片">
  </div>
</template>

<script>
const imageUrl = require('@/assets/logo.png');

export default {
  data() {
    return {
      imageUrl
    };
  }
};
</script>

2. 路径问题处理

在使用上述方法时，需要注意以下路径问题：

  • 相对路径和绝对路径：确保图片路径是正确的，如果是相对路径，请确保相对于 index.html 或 public/index.html 文件。
  • Webpack打包：在Webpack打包过程中，图片路径可能会发生变化，特别是当图片放在 assets 文件夹中时。可以通过配置 vue.config.js 来解决路径问题。

3. 图片预加载

<template>
  <div>
    <img :src="imageUrl" alt="示例图片" @load="handleImageLoad">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/your/image.png'
    };
  },
  methods: {
    handleImageLoad() {
      console.log('图片加载完成');
    }
  },
  mounted() {
    const img = new Image();
    img.src = this.imageUrl;
    img.onload = () => {
      this.handleImageLoad();
    };
  }
};
</script>

4. 总结