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,
})
相关推荐
无羡仙42 分钟前
从零构建 Vue 弹窗组件
前端·vue.js
计算机毕设VX:Fegn08954 小时前
计算机毕业设计|基于springboot + vue动物园管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
北辰alk4 小时前
深入理解Vue数据流:单向与双向的哲学博弈
vue.js
北辰alk5 小时前
解决Vue打包后静态资源图片失效的终极指南
vue.js
Jing_Rainbow7 小时前
【Vue-2/Lesson62(2025-12-10)】模块化与 Node.js HTTP 服务器开发详解🧩
前端·vue.js·node.js
冴羽8 小时前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js
五仁火烧8 小时前
Vue3 项目的默认端口行为
服务器·vue.js·nginx·容器·vue
Younglina9 小时前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
pas13610 小时前
31-mini-vue 更新element的children
前端·javascript·vue.js
计算机程序设计小李同学11 小时前
婚纱摄影集成管理系统小程序
java·vue.js·spring boot·后端·微信小程序·小程序