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,
})
相关推荐
sugar__salt2 小时前
跟着 Demo 学 Pinia:两种仓库写法 + 完整 TodoList 复现
前端·javascript·vue.js·前端框架·vue
java1234_小锋7 小时前
Vue3专题 - 条件渲染
前端·javascript·vue.js
鸽鸽7 小时前
Vue 3 API 完全指南:从 Options 到 Composition 的进阶之路
前端·vue.js
肉肉不吃 肉7 小时前
无渲染组件和组合式函数
前端·javascript·vue.js
其美杰布-富贵-李7 小时前
01 从项目结构开始认识 Vue 3
javascript·vue.js·ecmascript
snow@li8 小时前
Vue Axios封装与SpringBoot Payload封装全景关联分析(前后端数据交互底层闭环)
前端·vue.js·spring boot
用户83134859306988 小时前
Vue3+Cesium实现阴天乌云+下雨天气特效
vue.js·webgl·cesium
无人生还8 小时前
从 Vue3 到 React · 快速上手系列第 13 篇:工程化与综合实战(Vite + Todo 应用)
前端·vue.js·react.js
油丶酸萝卜别吃8 小时前
eventBus.js — 全局事件总线说明文档
前端·javascript·vue.js
90后的晨仔10 小时前
uni-app 项目目录结构全解:每个文件、每个文件夹的作用与配置详解
vue.js·uni-app