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

一 :引入图片

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>
相关推荐
DN金猿9 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子10 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
Invinciblenuonuo13 分钟前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
志存高远6622 分钟前
Kotlin 的 suspend 关键字
前端
美味的大香蕉31 分钟前
Spark-SQL与Hive
笔记
www_pp_34 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
_Hello_Panda_36 分钟前
FX10(CYUSB4014)USB3.2(10Gbps)开发笔记分享(1):硬件设计与开发环境搭建
笔记·fpga开发·fx10·cyusb4014
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js