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,
})
相关推荐
发现一只大呆瓜4 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
鱼毓屿御4 小时前
如何给用户添加权限
前端·javascript·vue.js
Java新手村4 小时前
基于 Vue 3 + Spring Boot 3 的 AI 面试辅助系统:实时语音识别 + 大模型智能回答
vue.js·人工智能·spring boot
雯0609~4 小时前
hiprint:实现项目部署与打印3-vue版本-独立出模板设计与模板打印页面
前端·vue.js·arcgis
David凉宸5 小时前
Vue 3 + TS + Vite + Pinia vs Vue 2 + JS + Webpack + Vuex:对比分析
javascript·vue.js·webpack
滕青山5 小时前
Vue项目BMI计算器技术实现
前端·vue.js
boooooooom5 小时前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
wxin_VXbishe5 小时前
C#(asp.net)学员竞赛信息管理系统-计算机毕业设计源码28790
java·vue.js·spring boot·spring·django·c#·php
哈里谢顿6 小时前
Vue 3 入门完全指南:从零构建你的第一个响应式应用
vue.js
三十_A7 小时前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频