使用img标签时候报路径错误

报错信息

at formatError (file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50863:46) at TransformContext.error (file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50857:19) 21:21:33 [vite] Internal server error: Failed to resolve import "src/assets/images/Banner1.jpg" from "src/views/Home/components/Homebanner.vue". Does the file exist? Plugin: vite:import-analysis File: D:/learn/Project/IURunning/iurf/Vue-IURF/src/views/Home/components/Homebanner.vue:4:46 35 | 36 | import { createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue" 37 | import _imports_0 from 'src/assets/images/Banner1.jpg' | ^ 38 | import _imports_1 from 'src/assets/images/Banner2.png' 39 | at formatError (file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50863:46) at TransformContext.error (file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50857:19) at normalizeUrl (file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:66092:33) at async file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:66247:47 at async Promise.all (index 13) at async TransformContext.transform (file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:66168:13) at async file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite-plugin-inspect/dist/index.mjs:377:17 at async Object.transform (file:///D:/learn/Project/IURunning/iurf/Vue-IURF/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51172:30) at async

报错原因

<img :src='src\assets\images\Banner1.jpg' alt=""> 如果只用一个 \ 会报错因为这个\已经有特定的含义了

解决办法

使用 转义字符 把\ 转换成\ 。2个\\ = \

所以 加一个\ 就不会报错了 <img :src='src\\assets\\images\\Banner1.jpg' alt="">

相关推荐
y先森13 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy13 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891116 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js