如何在vue中使用动态使用本地图片路径
不知道各位小伙伴有没有在开发遇到一个问题,就是在线上的项目使用后台返回本地图片路径,然后加载不上的情况呢?
我的解决方法就是:先在项目的data下定义好这样一个数组用于存放需要加载的路径
[
{name:"张山" url:require(./img/zhangshan.png)} ,
{name:"李四" url:require(./img/zhangshan.png)} ,
{name:"老王" url:require(./img/zhangshan.png)}
],
通过后台传过来的字段匹配上然后就可以把本地url 替换接口的路径然后大功告成!
如何在vue中使用动态使用本地图片路径的更多相关文章
- 如何在vue中修改动态标签中的样式和修改组件库样式
vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...
- vue中如何动态的绑定图片,vue中通过data返回图片路径
在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. 效果:
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成 ...
- 如何在vue中使用ts
注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...
- 如何在Vue中建立全局引用或者全局命令
1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...
- 如何在vue中使用svg
1.安装依赖 npm install svg-sprite-loader --save-dev 2.在config文件中配置 const path = require('path'); func ...
- 如何在vue中引入图片?
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...
- 如何在Vue中优雅的使用防抖节流
1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...
随机推荐
- (Dijkstra) POJ2387 Til the Cows Come Home
Til the Cows Come Home Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 81024 Accepted ...
- ansible的主机的默认配置部分
Ansible默认安装好后有一个配置文件/etc/ansible/ansible.cfg,该配置文件中定义了ansible的主机的默认配置部分,如默认是否需要输入密码.是否开启sudo认证.actio ...
- VM中的Linux如何设置共享文件夹
1.点击[编辑虚拟机设置]-[选项]-[共享文件夹],选择“总是启用” 2.点击[确定],并重启系统,已经设置好了
- jquery 实现按回车键登录功能的写法
<script> //登录的逻辑函数 自己写 function submitFuc(){ var loginName= $("#loginName").val(); v ...
- docker 私有仓库之Harbor搭建与使用
Harbor搭建 下载Harbor: http://harbor.orientsoft.cn/ #下载offline版本 配置Harbor tar xvf harbor-online-installe ...
- LInux Zebra
本文章摘自linux公社 https://www.linuxidc.com/Linux/2015-07/120224p1.htm 写在前面 从22号中午开始琢磨zebra/quagga的用法,一直 ...
- android 与html交互java调js与js调java操作
1.首先在项目下建一个assets目录(右击app->New->Folder->Assets Flolder),直接放在项目根目录下和res目录同级别(把所html,js,图片,cs ...
- Quartus II 中 Verilog 常见警告/错误汇总
Verilog 常见错误汇总 1.Found clock-sensitive change during active clock edge at time <time> on regis ...
- springMVC中a标签传递多个参数到后台的应用
1.js页面:返回json填充HTML部分代码 <a class='byCard' href="+path+"/static/toCardView/"+ data. ...
- SQL Server进阶(四):联接-cross join、inner join、left join、right jion、union、union all
测试数据脚本 CREATE TABLE Atable ( S# INT, Sname ), Sage INT, Sfrom ) ) insert into Atable ,N,N'A' union a ...