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,
})
相关推荐
蓝莓味的口香糖28 分钟前
【vue3】组件的批量全局注册
前端·javascript·vue.js
独泪了无痕1 小时前
自动导入 AutoImport:告别手动引入依赖,优化Vue3开发体验
前端·vue.js·typescript
全栈小54 小时前
【前端】Vue 组件开发中的枚举值验证:从一个Type属性错误说起
前端·javascript·vue.js
꧁꫞꯭零꯭点꯭꫞꧂5 小时前
G6绘制机柜 以及机柜设备的demo
前端·javascript·vue.js
wuhen_n6 小时前
5年前端,我为什么要all in AI Agent?
前端·vue.js·ai编程
optimistic_chen6 小时前
【Vue入门】创建Vue工程环境和响应式函数
前端·javascript·vue.js·前端框架·html
林恒smileZAZ7 小时前
告别满屏 v-if:用一个自定义指令搞定 Vue 前端权限控制
前端·javascript·vue.js
AI论文酱7 小时前
Vue.js入门(搭建第一个页面,新手零配置)
vue.js
SuperEugene8 小时前
NPM Script 实战:常用命令设计与封装|Vue 工程化篇
前端·javascript·vue.js·前端框架·npm
小霍同学8 小时前
Vue 动态表单(Dynamic Form)
前端·vue.js