不知道各位小伙伴有没有在开发遇到一个问题，就是在线上的项目使用后台返回本地图片路径，然后加载不上的情况呢？

我的解决方法就是：先在项目的data下定义好这样一个数组用于存放需要加载的路径

[

　　{name:"张山" url：require（./img/zhangshan.png）} ,

　　{name:"李四" url：require（./img/zhangshan.png）} ,

　　{name:"老王" url：require（./img/zhangshan.png）}

],

通过后台传过来的字段匹配上然后就可以把本地url 替换接口的路径然后大功告成！

如何在vue中使用动态使用本地图片路径的更多相关文章

  1. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  2. vue中如何动态的绑定图片，vue中通过data返回图片路径

    在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. 效果:

  3. vue中el-upload上传多图片且携带参数，批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

  4. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  5. 如何在vue中使用ts

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...

  6. 如何在Vue中建立全局引用或者全局命令

    1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...

  7. 如何在vue中使用svg

    1.安装依赖 npm install svg-sprite-loader --save-dev 2.在config文件中配置    const path = require('path'); func ...

  8. 如何在vue中引入图片？

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...

  9. 如何在Vue中优雅的使用防抖节流

    1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

随机推荐

  1. HTML学习笔记Day13

    一.HTML+CSS代码实现三角形 (一)transparent透明属性实现代码编写三角 <!DOCTYPE html> <html> <head> <met ...

  2. RS485 / RS422

    RS422可以变为RS485:A和Y短路(然后接T/R+),B和Z短路(然后接T/R-) RS485是半双工,只有两根线通信线,要么接收状态,要么发送状态 RE为低电平,作为接收器 DE为高电平,作为 ...

  3. jq实现百度图片移入移出内容提示框上下左右移动的效果

    闲来无聊,看到百度图片hover的时候提示框的效果,遂想试一试自己能否实现. 百度图片hover的效果: 需求: 1. 当鼠标从图片上部移入的时候,提示框从上部移到正常位置.从上部移出的时候,提示框从 ...

  4. IIS异常：CS0016: 未能写入输出文件“c:\WINDOWS\Microsoft.NET\Framework\.。。”--“拒绝访问

    CS0016: 未能写入输出文件“c:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/.........dll” ...

  5. 2017-12-15python全栈9期第二天第五节之while else的用法一当被break打断时else内容的结果不会被打印

    #!/user/bin/python# -*- coding:utf-8 -*-count = 0while count <5 : count += 1 if count == 3 : brea ...

  6. 剑指Offer_编程题_6

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个 ...

  7. python 正则表达式re模块

    #####################总结##############    优点:  灵活, 功能性强, 逻辑性强.               缺点:  上手难,旦上手, 会爱上这个东西    ...

  8. Python线程和协程-day10

    写在前面 上课第10天,打卡: 感谢Egon老师细致入微的讲解,的确有学到东西! 一.线程 1.关于线程的补充 线程:就是一条流水线的执行过程,一条流水线必须属于一个车间: 那这个车间的运行过程就是一 ...

  9. PCA(主成分分析)的简单理解

    PCA(Principal Components Analysis),它是一种“投影(projection)技巧”,就是把高维空间上的数据映射到低维空间.比如三维空间的一个球,往坐标轴方向投影,变成了 ...

  10. lombok注解介绍

    lombok注解介绍 lombok注解文档lombok官网下载 lombok是一个可以帮助我们简化java代码编写的工具类,尤其是简化javabean的编写,即通过采用注解的方式,消除代码中的构造方法 ...