vue3导入本地图片2种实现方法

  1. <script setup>中使用import语法:
javascript 复制代码
<template>
  <img :src="logo" alt="Logo">
</template>
 
<script setup>
import logo from './assets/logo.png';
</script>
  1. 使用Vue的ref来动态地在<script setup>中更换图片:

javascript 复制代码
<template>
  <img :src="imageSrc" alt="Dynamic Image">
  <button @click="changeImage">Change Image</button>
</template>
 
<script setup>
import { ref } from 'vue';
 
const imageSrc = ref('./assets/logo.png');
 
function changeImage() {
  imageSrc.value = './assets/other-image.png';
}
</script>
  1. 方法二:使用new URL(url, import.meta.url)
javascript 复制代码
<script setup>
import { ref } from "vue";
const Img = ref("");
Img.value = new URL(
  "@/assets/xxxx.jpg",
  import.meta.url
).href;
</script>
相关推荐
w_y_fan2 分钟前
Flutter中的沉浸式模式设置
前端·flutter
游荡de蝌蚪2 分钟前
快速打造Vue后台管理系统
前端·javascript·vue.js
code_YuJun3 分钟前
3. 修改 vue.config.js 配置完成打包分析和优化
前端
文心快码BaiduComate11 分钟前
轻松实践:用Python实现“名字大作战”游戏,表白Zulu!
前端·后端·微信小程序
神毓逍遥kang1 小时前
最近学习rust,然后使用rust构建你的前端cli工具助力前端生态
前端
1024小神1 小时前
Android冷启动和热启动以及温启动都是什么意思
前端
June_liu2 小时前
列太多vxe-table自动启用横向虚拟滚动引起的bug
前端·javascript
齐杰拉2 小时前
useSse 开源:如何把流式数据请求/处理简化到极致
前端·chatgpt
起风了啰2 小时前
Android & IOS兼容性问题
前端
云枫晖2 小时前
手写Promise-then的基础实现
前端·javascript