vue.js中图片怎么插入？

vue.js中图片怎么插入？下面本篇文章给大家介绍一下在vue.js中插入图片的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

vue.js是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

那么，vue.js中图片怎么插入？

首先给图片地址绑定变量

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

在script中设置变量

<script>
    //方法1.直接将图片引入为模块
    require imgUrl <p style="color:transparent">来源gao!%daima.com搞$代*!码网</p>from "../assets/test.png-600"
 
    //方法2.将imgUrl放在数据里
    data(){
        return {
            imgUrl:require("../assets/test.png-600")
        }
    }
 
    //方法3.在生命周期函数中设置
 
    data(){
        return {
            imgUrl:""
        }
    }
 
    created(){
        let urlTemp = "assets/test.png-600";
 
        this.imgUrl = require("@/"+urlTemp)
    }
</script>

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

更多web前端自学知识，请查阅 搞代码网 ！！

以上就是vue.js中图片怎么插入？的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)