Vue项目实战：详解如何使用import语句高效引入本地图片资源

一、为什么要使用import语句引入图片？

1. 路径管理复杂：随着项目结构的复杂化，相对路径的管理变得繁琐，容易出错。
2. 构建工具兼容性：现代前端开发离不开构建工具（如Webpack、Vite等），直接使用相对路径可能导致图片在构建过程中无法正确处理。
3. 模块化管理：使用import语句可以将图片作为模块进行管理，便于优化和缓存。

二、Vue项目中使用import语句引入单张图片

1. 图片存放路径

2. 使用import语句引入图片

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

这里的@符号通常在Vue项目中配置为指向src目录的别名，具体配置可以在vue.config.js文件中找到。

3. 在模板中使用引入的图片

<template>
  <div>
    <img :src="logo" alt="Logo">
  </div>
</template>

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

export default {
  name: 'MyComponent',
  data() {
    return {
      logo
    };
  }
};
</script>

三、Vue项目中使用import语句引入多张图片

1. 准备多张图片

2. 使用import.meta.url引入图片

function requireImg(imgName) {
  return new URL(`../assets/images/${imgName}`, import.meta.url).href;
}

3. 在模板中使用引入的图片

<template>
  <div>
    <img :src="getImage('img1.png')" alt="Image 1">
    <img :src="getImage('img2.png')" alt="Image 2">
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    getImage(imgName) {
      return new URL(`../assets/images/${imgName}`, import.meta.url).href;
    }
  }
};
</script>

四、Vite构建工具的特殊处理

1. 使用import.meta.url引入图片

const logo = new URL('../assets/images/logo.png', import.meta.url).href;

2. 在模板中使用引入的图片

<template>
  <div>
    <img :src="logo" alt="Logo">
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      logo: new URL('../assets/images/logo.png', import.meta.url).href
    };
  }
};
</script>

五、总结