vue的三种图片引入方式代码实例
更新时间：2019年11月19日 09:55:11 作者：周逸航
这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
这篇文章主要介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
详解@Vue/Cli 3 Invalid Host header 错误解决办法
这篇文章主要介绍了详解@Vue/Cli 3 Invalid Host header 错误解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
Vue3使用ref与reactive创建响应式对象的示例代码
这篇文章主要详细介绍了Vue3使用ref与reactive创建响应式对象的方法步骤,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-02-02
本文详细介绍了如何在使用Vite构建的Vue项目中实现ElementPlus暗黑模式及模式切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
element-ui中el-cascader动态加载和默认值详解
vue+elementUI项目中el-cascader级联选择器使用频率非常高,下面这篇文章主要给大家介绍了关于element-ui中el-cascader动态加载和默认值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue如何获取图片流数据并展示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
本篇文章主要介绍了vue2.0开发入门笔记之.vue文件的生成和使用 ,非常具有实用价值，需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了vue实现图片预览组件封装与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最近小编接到一个项目，需要在浏览器的ide中支持自定义提示功能，接下来通过本文给大家介绍在vue中实现Monaco Editor自定义提示功能,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue跳转同一路由报错的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04![vue中使用[provide/inject]实现页面reload的方法](//img.jbzj.com/images/xgimg/bcimg9.png)
vue中使用[provide/inject]实现页面reload的方法
这篇文章主要介绍了在vue中使用[provide/inject]实现页面reload的方法，文中给大家提到了在vue中实现页面刷新不同的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
![vue中使用[provide/inject]实现页面reload的方法](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论