vue中img src 动态加载本地json的图片路径写法


Posted in Javascript onApril 25, 2019

目录:

vue中img src 动态加载本地json的图片路径写法

注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里;否则json文件里的url地址找不到。

major_info.json文件里的图片路径写法

vue中img src 动态加载本地json的图片路径写法

页面通过v-bind的方式加载:

vue中img src 动态加载本地json的图片路径写法

PS:vue中图片src路径赋值

vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到。网上找到解决方案,在此mark一下,以便以后查询。

图片src路径动态赋值

<img class="thumb" width="200px" height="150px" :src="getThumb(item.type)" />

<script>
...
methods: {
  getThumb(type) {
   let thumb = {
    WMS: require("img/world.jpg"),
    WFS: require("img/wfs.jpg"),
    tool: require("img/tool.jpg")
   };
   return thumb[type];
  }
}
...
</script>

img为设置的路径别名

...
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
   'assets': path.resolve(__dirname, '../src/assets'),
   'img': resolve('static/img'),
   '%': resolve('./static')
  }
 },
...

固定路径

如果是固定路径的话:

<img class="thumb" width="200px" height="150px" src="/static/img/world.jpg" />

总结

以上所述是小编给大家介绍的vue中img src 动态加载本地json的图片路径写法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧!

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
js的对象与函数详解
Jan 21 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 #Javascript
vue项目中使用fetch的实现方法
Apr 25 #Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 #Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 #Javascript
在微信小程序中使用图表的方法示例
Apr 25 #Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 #Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 #Javascript
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python实现单词翻译功能
2017/06/06 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Django REST framework内置路由用法
2019/07/26 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python PO设计模式的具体使用
2019/08/16 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
国际商务专业求职信
2014/07/15 职场文书
杨善洲电影观后感
2015/06/04 职场文书
提档介绍信范文
2015/10/22 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers