vue3+vite5中require引入图片失效,解决方法new URL

参考文章:https://www.jb51.net/javascript/284643cld.htm

解决方法

复制代码
官网 https://vitejs.cn/guide/assets.html#the-public-directory
html 复制代码
<div class="picfloat">
  <img :src="oneNews.floatPic" alt="1">
</div>
javascript 复制代码
import { reactive } from 'vue';

let oneNews = reactive({
  floatPic: new URL('@/assets/home-cake3.jpg',import.meta.url).href,
})
相关推荐
妙码生花16 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(二十六):icon 组件封装
前端·vue.js·typescript
李明卫杭州17 分钟前
Vue2 & Vue3 中 Router `props` 配置详解:彻底摆脱 `$route` 依赖
前端·vue.js·前端框架
熊猫钓鱼>_>21 分钟前
2026 前端的三场底层革命:当 Vue、React Native 和 Three.js 同时去掉中间层
前端·javascript·vue.js·react native·架构·webgl·three.js
自己记录_理解更深刻1 小时前
Computed 聚合依赖+ 竞态处理
vue.js
李明卫杭州3 小时前
Vue3 Suspense 组件详解:从入门到避坑指南
vue.js
gis开发之家6 小时前
vue3组合式函数(Composables)的艺术——将业务逻辑从UI组件中连根拔起
前端·javascript·vue.js·前端框架·vue3·前端工程化·前端架构
uuai6 小时前
vue导出pdf
前端·vue.js·pdf
Cobyte7 小时前
17.响应式系统比对:链表如何实现响应式系统的高效更新
前端·javascript·vue.js
前端青山21 小时前
Vue 3 避坑指南:从入门到精通的实战经验总结
前端·javascript·vue.js
濮水大叔1 天前
在大型 Vue 项目中,如何有效管理复杂的状态?“散装版” vs “套装版”
前端·vue.js·typescript