Vue项目中如何优雅地引入和处理本地图片资源

一、Vue2与Vue3中的图片引入方法

1. Vue2中的图片引入

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

<script>
export default {
  data() {
    return {
      imageSrc: require('@/assets/images/example.jpg')
    }
  }
}
</script>

这种方法在Vue2中非常常见，但也存在一些问题，比如性能浪费和路径管理复杂。

2. Vue3中的新方法

在Vue3中，尤其是使用vite作为构建工具时，require方法不再被支持。取而代之的是两种新的引入方法：

方法一：使用import语法

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

<script setup>
import imageSrc from '@/assets/images/example.jpg'
</script>

方法二：使用new URL构造函数

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

<script setup>
const imageSrc = new URL('../assets/images/example.jpg', import.meta.url).href
</script>

这两种方法在Vue3中更为推荐，能够更好地利用ES模块的特性。

二、简化图片导入过程

// assets/images/index.js
import amuse from './amuse.png';
import profession from './profession.png';
import icon1 from './icons/icon1.png';
import icon2 from './icons/icon2.png';

export default {
  amuse,
  profession,
  icon1,
  icon2
};

import images from '@/assets/images/index.js';

<template>
  <img :src="images.amuse" alt="娱乐图片">
</template>

三、动态引入本地图片

<template>
  <div v-for="item in list" :key="item.id">
    <img :src="getImageUrl(item.type)" alt="动态图片">
  </div>
</template>

<script setup>
import a from '@/assets/images/a.png';
import b from '@/assets/images/b.png';

const list = [
  { id: 1, type: 'doc' },
  { id: 2, type: 'excel' }
];

function getImageUrl(type) {
  if (type === 'doc') {
    return a;
  } else if (type === 'excel') {
    return b;
  }
  return null;
}
</script>

四、优化图片引入的性能

解决方案一：使用computed属性

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

<script>
const src = require('@/assets/images/example.jpg');

export default {
  computed: {
    imageSrc() {
      return src;
    }
  }
}
</script>

解决方案二：直接在模板中引入

<template>
  <div class="bg"></div>
</template>

<style>
.bg {
  background: url('@/assets/images/example.jpg');
}
</style>

五、使用Vue CLI引入本地图片

import water from '@/assets/images/水.jpg';

<template>
  <img :src="water" alt="水图片">
</template>

或者在style中使用：

<style>
.image {
  background-image: url('@/assets/images/loginBackground.jpg');
}
</style>

六、总结