在vue.js插图片的示例

这篇文章主要介绍了在vue.js插图片的示例，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

vue.js插图片的方法：首先给图片地址绑定变量；然后在script中设置变量；最后通过require方法将图片引入为模块或者将imgUrl放在数据里即可。

vue插入图片

首先给图片地址绑定变量

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

在script中设置变量

<script>
    //方法1.直接将图片引入为模块
    require imgUrl from "../assets/test.png"
 
    //方法2.将imgUrl放在数据里
    data(){
        return {
            imgUrl:require("../assets/test.png")
        }
    }
 
    //方法3.在生命周期函数中设置
 
    data(){
        return {
            imgUrl:""
        }
    }
 
    created(){
        let urlTemp = "assets/test.png";
        this.imgUrl = require("@/"+urlTemp)
    }
</script>看完了这篇文章，相信你对在vue.js插图片的示例有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

感谢你能够认真阅读完这篇文章，希望小编分享在vue.js插图片的示例内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!