Vue3图片引入不求人：一文掌握图片路径设置技巧

图片路径设置方法

1. 使用require函数

// 在Vue组件的script部分
import logo from '@/assets/logo.png';

// 在模板中使用
<img :src="logo" alt="Logo">

2. 使用import语句

// 在Vue组件的script部分
import logo from '@/assets/logo.png';

// 在模板中使用
<img :src="logo" alt="Logo">

3. 使用URL构造函数

// 在Vue组件的script部分
export default {
  data() {
    return {
      logoUrl: new URL('../assets/logo.png', import.meta.url).href
    };
  }
};

// 在模板中使用
<img :src="logoUrl" alt="Logo">

4. 使用import.meta.url

import.meta.url是ES模块的一个内建对象，可以用来获取当前模块的URL。

// 在Vue组件的script部分
export default {
  data() {
    return {
      logoUrl: new URL('./assets/logo.png', import.meta.url).href
    };
  }
};

// 在模板中使用
<img :src="logoUrl" alt="Logo">

图片路径问题及解决方案

1. 图片不显示

• 图片路径错误或不存在。
• 图片文件格式不支持。

解决方案：

• 检查图片路径是否正确，确保图片文件存在且格式正确。

2. 动态引入图片路径错误

解决方案：

• 使用URL构造函数或import.meta.url来确保路径正确。

3. 图片路径与打包问题

解决方案：

• 使用Vite或Webpack的配置选项来确保图片路径在打包后仍然正确。

总结