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 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
尚学教辅学习资料4 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
IT、木易5 小时前
跟着AI学vue第五章
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员5 小时前
Vue 2全屏滚动动画实战:结合fullpage-vue与animate.css打造炫酷H5页面
前端·css·vue.js
春天姐姐6 小时前
vue3项目开发总结
前端·vue.js·git
烂蜻蜓9 小时前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app
谢尔登10 小时前
Vue 和 React 的异同点
前端·vue.js·react.js
祈澈菇凉14 小时前
Webpack的基本功能有哪些
前端·javascript·vue.js
少年姜太公15 小时前
搞懂面试常考的watch和watchEffect,看这篇文章就够了
前端·javascript·vue.js
yanglamei196216 小时前
基于Python+Django+Vue的旅游景区推荐系统系统设计与实现源代码+数据库+使用说明
vue.js·python·django