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>
相关推荐
小二·32 分钟前
Python Web 开发进阶实战 :AI 原生数字孪生 —— 在 Flask + Three.js 中构建物理世界实时仿真与优化平台
前端·人工智能·python
Whisper_Sy1 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 网络状态实现
android·java·开发语言·javascript·网络·flutter·php
新缸中之脑1 小时前
Weave.js:开源实时白板库
开发语言·javascript·开源
Amumu121382 小时前
Vue组件化编程
前端·javascript·vue.js
We་ct2 小时前
LeetCode 6. Z 字形变换:两种解法深度解析与优化
前端·算法·leetcode·typescript
小二·2 小时前
Python Web 开发进阶实战(终章):从单体应用到 AI 原生生态 —— 45 篇技术演进全景与未来开发者生存指南
前端·人工智能·python
m0_637256583 小时前
vue-baidu-map添加了类型组件导致非常卡顿的问题
前端·javascript·vue.js
雨季6663 小时前
基于设备特征的响应式 UI 构建:Flutter for OpenHarmony 中的智能布局实践
javascript·flutter·ui
挂机且五杀3 小时前
为什么在React地图组件里,memo 不是优化,而是生存?
前端·react.js·前端框架
RFCEO3 小时前
HTML编程 课程七、:HTML5 新增表单标签与属性
前端·html·html5·搜索框·手机号·邮箱验证·日期选择