解决Vue设置图片的动态src不生效的问题

一、问题描述

在vue项目中,想要动态设置img的src时,此时发现图片会加载失败。在Vue代码中是这样写的:

在Vue的data中是这样写的:

我的图片在根目录下的static里面:

但是在页面上这个图片却无法加载出来。

二、解决方案

原因:src被当做静态资源处理了,并没有进行编译。

解决方式:使用require引入图片,因为require是在运行时加载。如下:

界面效果:

相关推荐
拾光拾趣录几秒前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia1 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽2 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥3 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02347 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder12 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder13 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep20 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛25 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i34 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css