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 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 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基础知识:函数基础知识
2006/12/13 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
Python 正则表达式实现计算器功能
2017/04/29 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
教师现实表现材料
2014/02/14 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
诚信贷款承诺书
2014/05/30 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
诚实守信主题班会
2015/08/13 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
python模板入门教程之flask Jinja
2022/04/11 Python