笔记：Vue3+Vite 怎么导入静态资源，比如图片/组件

skyseey2025-04-03 9:10

一：引入图片

1.使用import 导入

复制代码

<script setup lang="ts">
import Image from '@/assets/Image.png'
</script>
 
<template>
   <img :src="Image"></img>
</template>

2.使用import()方法动态引入

复制代码

<template>
  <div>
    <img :src="imageUrl" alt="Dynamic Image">
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const imageUrl = ref(''); // 初始为空字符串
 
    onMounted(() => {
      // 动态引入图片
      import(`@/assets/images/${dynamicImageName}.jpg`).then(module => {
        imageUrl.value = module.default; // 设置图片URL
      });
    });
 
    // 示例：动态图片名称变量，根据需要修改或从数据中获取
    const dynamicImageName = 'your-image-name'; // 根据实际情况动态赋值或从数据获取
 
    return {
      imageUrl,
      dynamicImageName // 如果需要在模板中直接使用，例如在表达式中使用 `${dynamicImageName}`
    };
  }
}
</script>

二：引入组件

1.使用import导入直接使用组件

import DemoVueCP from " @/views/Coomponents/index.vue**"**

2.动态引入组件配合Component组件

复制代码

const currentTabComponent = computed(() => {
  return defineAsyncComponent(() => {
     return import(`@/views/onsale/${paneData.currentPane}/index.vue`)
  })
}

- 这里可以搭配Suspense异步组件去使用

复制代码

<Suspense>
          <template #default>
           <component :is="getComponent" :data="editOperate.data" @onClose="() => {
              editOperate.show = false;
            }"></component>
          </template>
          <template #fallback>
            <el-empty description="Loading..." />
          </template>
        </Suspense>

笔记：Vue3+Vite 怎么导入静态资源，比如图片/组件

一 ：引入图片

二：引入组件

一：引入图片