一、静态路径引用

1.1 相对路径和绝对路径

  • <img src="./assets/logo.png" alt="Logo">

    这种方式简单直接，但容易因目录结构变化导致路径失效。

  • <img src="/images/logo.png" alt="Logo">

    这种方式不受项目结构变化的影响，路径更加稳定。

1.2 使用public目录

<img src="/images/image.jpg" alt="Description">

这种方式适用于那些不需要Webpack处理的静态资源。

二、作为模块导入

2.1 使用import语句

import imageUrl from '@/assets/image.jpg';

export default {
  data() {
    return {
      logo: imageUrl
    };
  }
}

在模板中使用：

<img :src="logo" alt="Logo">

2.2 使用require引入

const imgSrc = require('../../assets/images/panda.png');

在模板中使用：

<img :src="imgSrc" alt="Panda">

require方式同样通过Webpack处理，适用于动态路径的情况。

三、动态路径引用

3.1 使用Vue的数据绑定

export default {
  data() {
    return {
      dynamicImageUrl: 'path/to/image.jpg'
    };
  },
  methods: {
    getImageUrl(item) {
      return `path/to/${item.imgUrl}`;
    }
  }
}

在模板中使用：

<img :src="dynamicImageUrl" alt="Dynamic Image">
<img :src="getImageUrl(item)" alt="Item Image">

3.2 使用require动态引入

在动态路径中使用require时，需要注意Webpack的解析规则。例如：

methods: {
  getImage(item) {
    return require(`@/assets/images/${item.imgUrl}`);
  }
}

在模板中使用：

<img :src="getImage(item)" alt="Item Image">

四、常见问题及解决方案

4.1 图片不显示

  • 使用require或import引入图片路径。
  • 将图片放在public或static目录下，使用绝对路径引用。

4.2 路径别名设置

在Vue项目中，可以通过设置路径别名简化引用。例如，在vue.config.js中设置：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@assets': path.resolve(__dirname, 'src/assets')
      }
    }
  }
}

然后在项目中使用：

import logo from '@assets/logo.png';

这种方式提高了代码的可读性和维护性。

五、总结