uni-app 之 图片

uni-app 之 图片

获取图片 v-bind 动态绑定

image.png

复制代码
<template>
    <view>
        <view>
            --- 获取图片1 ---
            <image src="../../static/img/tabbar_home1.png"></image>
        </view>

        <view>
            --- 获取图片2 v-bind 动态绑定---
            <image v-bind:src="img"></image>
        </view>
        
        <view>
            --- 获取图片3 :简写 ---
            <image :src="img"></image>
        </view>
        
        <view>
            --- 获取图片4 :循环获取 ---
            <image :src="'../../static/img/tabbar_home'+item+'.png'" v-for="item in [1,2]"></image>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {

                img: "../../static/img/tabbar_home1.png"

            }
        },
        methods: {

        }
    }
</script>

<style>
    image {
        width: 50rpx;
        height: 50rpx;
    }
</style>
相关推荐
予你@。2 分钟前
# Vue2 + Element UI 表格合并实战:第二列按「第一列 + 第二列」条件合并
前端·javascript·vue.js
A_nanda10 分钟前
一款前端PDF插件
前端·学习·pdf·vue
吱夏cz14 分钟前
EasyVoice后端服务本地化
前端
小江的记录本19 分钟前
【HashMap】HashMap 系统性知识体系全解(附《HashMap 面试八股文精简版》)
java·前端·后端·容器·面试·hash·哈希
小J听不清21 分钟前
CSS 文本对齐方式实战:text-align 核心用法
前端·javascript·css·html·css3
我爱学习_zwj23 分钟前
设计模式-2(单例模式与原型模式)
前端·javascript·设计模式
bugcome_com28 分钟前
ASP.NET Web Pages 教程 —— Razor 语法全面指南
前端·asp.net
霍理迪32 分钟前
Vue—侦听属性
前端·javascript·vue.js
酉鬼女又兒32 分钟前
零基础入门前端弹性布局(Flexbox)实战:结合 Class 与 ID 选择器(可用于备赛蓝桥杯Web开发应用)
前端·css·蓝桥杯·html·html5