Vue动态加载图片图片不显示
图片是放在assets文件夹下的
使用require进行解决
图片不显示的原因
在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,
<el-table-column label="照片">
<template slot-scope="scope">
<i class="el-icon-picture-outline" @click="showPhoto(scope.row)"></i>
<img id="aa" :src="scope.row.img" />
</template>
</el-table-column>
{
date: "2016-05-02",
studentId: "201319981010",
name: "王2虎",
className: "高2018级2班",
img: require("../../../assets/image/wearther.png"), //引号中括号里面哦
address: "区金沙江路 1518 弄"
},
Vue动态加载图片图片不显示的更多相关文章
- Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子
Delphi7 第三方控件1stClass4000的TfcImageBtn按钮控件动态加载jpg图片例子 procedure TForm1.Button1Click(Sender: TObject); ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- vue动态加载组件
vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...
- vue如何动态加载本地图片
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个im ...
- vue动态加载图片,取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- vue 动态加载图片路径报错解决方法
最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...
- 关于Unity3D中Resources动态加载NGUI图片的方法
在NGUI中有些图片我需要动态进行变更或者加载,怎么办? 首先在项目中创建一个Resources目录,接着把需要的图片放在这里面,可以有子文件夹么?当然可以,文件结构很重要哦~ NGUI加载图片的方法 ...
- vue实践---vue动态加载组件
开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...
- VUE 动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
随机推荐
- Prometheus学习系列(四)之Prometheus 配置说明
前言 本文来自Prometheus官网手册 和 Prometheus简介 说明 Prometheus通过命令行和配置文件进行配置,命令行配置不能修改的系统参数(例如存储位置,要保留在磁盘和内存中的数据 ...
- (转)Python中的常见特殊方法—— repr方法
原文链接:https://www.cnblogs.com/tizer/p/11178473.html 在Python中有些方法名.属性名的前后都添加了双下划线,这种方法.属性通常都属于Python的特 ...
- springboot 打包jar 运行找资源文件
使用如下方式读取文件:ClassPathResource cpr = new ClassPathResource("static/ok.png");byte[] bdata = F ...
- 分布式CAP与BASE理论
参考: CAP和BASE理论 https://juejin.im/post/5d720e86f265da03cc08de74 https://github.com/changmingxie/tcc-t ...
- LATEX Mathematical Symbols
原文地址:https://www.caam.rice.edu/~heinken/latex/symbols.pdf
- 剑指offer笔记面试题7----重建二叉树
题目:输入某二叉树的前序遍历和中序遍历的结果,请重建该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如,输入前序遍历序列{1, 2, 4, 7, 3, 5, 6, 8}和中序遍历序列 ...
- 「SAP技术」A项目关联公司间退货STO流程
[SAP技术]A项目关联公司间退货STO流程 1)创建公司间退货STO单据. 如下图示的公司间退货STO 4500000572, 2),VL10B, 创建交货单. 如下图交货单号:80044918, ...
- [转载]——Automatic Tuning of Undo_retention Causes Space Problems (文档 ID 420525.1)
Automatic Tuning of Undo_retention Causes Space Problems (文档 ID 420525.1) 转到底部 In this Document Sy ...
- AJAX-CORS 跨域
1.CORS就是一套AJAX跨域问题的解决方案. 2.CORS的原理: CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问. 3.CORS浏览器支持情况: Chrome 3+ Firefox ...
- sublime插件开发教程4
写几个简单的例子详解下 import sublime import sublime_plugin class ExampleCommand(sublime_plugin.TextCommand): d ...