vue的三种图片引入方式代码实例


Posted in Javascript onNovember 19, 2019

这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

首先给图片地址绑定变量:

<template>
  <img :src="imgUrl">
</template>

在script中设置变量:

//方法1:直接将图片引入为模块
require imgUrl from "../assets/test.png"

//方法2:把imgUrl放在数据中
data() {
  return {
    imgUrl:require("../assets/test.png")
   }
}
补充方法2:(在data数组中保存数据的情况)
data() {
   test: [
     {  imgUrl: require('../assets/test.png'),  id: '1'  },
   ],
   ...
}

//方法3:在生命周期函数中设置
data() {
  return {
    imgUrl:" "
   }
}

created() {
  let urlTemp = "assets/test.png";
  this.imgUrl = require("@/" + urlTemp)
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 #Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 #Javascript
VUEX-action可以修改state吗
Nov 19 #Javascript
Vue.extend 编程式插入组件的实现
Nov 18 #Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 #Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
webpack常用配置总览(小结)
Nov 18 #Javascript
You might like
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Python 开发Activex组件方法
2009/11/08 Python
Numpy数组的保存与读取方法
2018/04/04 Python
Python向excel中写入数据的方法
2019/05/05 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
Java如何支持I18N?
2016/10/31 面试题
公司培训欢迎词
2014/01/10 职场文书
家长写给孩子的评语
2014/04/18 职场文书
出生证明范本
2015/06/15 职场文书
大学生受助感言
2015/08/01 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python