一 :引入图片
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>