图片路径概述

  1. 本地图片：存储在项目本地文件夹中的图片。
  2. 网络图片：存储在网络服务器上的图片。

本地图片路径

引用方式

  1. HTML标签中直接引用：
<img src="/path/to/image.png" alt="描述">
  1. Vue模板中动态引用：
<template>
  <img :src="imageSrc" alt="描述">
</template>

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

网络图片路径

引用方式

<img src="http://example.com/image.png" alt="描述">

图片路径优化技巧

使用别名

为了简化路径书写，可以在vue.config.js中配置别名。

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/path/to/your/project'
      }
    }
  }
};

使用别名引用图片

<img src="@/assets/image.png" alt="描述">

动态图片路径

<template>
  <img :src="imageSrc" alt="描述">
</template>

<script>
export default {
  data() {
    return {
      imageName: 'image.png'
    };
  },
  computed: {
    imageSrc() {
      return `@/assets/${this.imageName}`;
    }
  }
}
</script>

总结