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>
相关推荐
!win !10 分钟前
Tailwind CSS一些你需要记住的原子类
前端·tailwindcss
前端极客探险家18 分钟前
打造一个 AI 面试助手:输入岗位 + 技术栈 → 自动生成面试问题 + 标准答案 + 技术考点图谱
前端·人工智能·面试·职场和发展·vue
oscar99941 分钟前
JavaScript与TypeScript
开发语言·javascript·typescript
橘子味的冰淇淋~1 小时前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
利刃之灵1 小时前
03-HTML常见元素
前端·html
kidding7231 小时前
gitee新的仓库,Vscode创建新的分支详细步骤
前端·gitee·在仓库创建新的分支
听风吹等浪起1 小时前
基于html实现的课题随机点名
前端·html
leluckys1 小时前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
kidding7231 小时前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages
微学AI2 小时前
详细介绍:MCP(大模型上下文协议)的架构与组件,以及MCP的开发实践
前端·人工智能·深度学习·架构·llm·mcp