vue 图片引入方式

对于脚手架的不同，对应的引入方式也会有所不同

一、webpack脚手架

1、直接使用

<template>
  <div class="home">
     <img src="../assets/images/head1.jpg" />
  </div>
</template>

2、import引入方式

<template>
  <div class="home">
     <img :src="srcUrl" />
  </div>
</template>

<script setup lang="ts">
import srcUrl from '../assets/images/head1.jpg';
</script>

3、require()方法引入

<template>
  <div class="home">
     <img :src="srcUrl" />
  </div>
</template>

<script setup lang="ts">
    const srcUrl=require('../assets/images/head1.jpg')
</script>

二、vite脚手架

1、直接使用

与webpack相同

2、import引入方式

与webpack相同

3、new URL() + import.meta.url引入

<template>
  <div class="home">
     <img :src="srcUrl" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const srcUrl = ref(new URL('../assets/images/head1.jpg', import.meta.url).href);
</script>