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 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务4 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛5 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑8 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭14 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿19 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
iOS阿玮22 分钟前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
无奈何杨28 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭35 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆39 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js