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 分钟前
前端工程化第一步:BEM 国际命名规范与 CSS Reset 实战
前端·css
kyriewen9 分钟前
开源|Image Harvest v1.0.5:AI 智能标签 + Eagle 导出,设计师和开发者的图片工作流神器
前端·javascript·ai编程
wuhen_n15 分钟前
LangChain Memory 详解:实现 AI 连续对话不丢失上下文
前端·langchain·ai编程
wuhen_n31 分钟前
LangChain Function Call 实战:让 AI 调用自定义工具
前端·langchain·ai编程
DyLatte35 分钟前
很多人把坚持,误以为成长
前端·后端·程序员
XZ-07000142 分钟前
MySQL-综合应用(Python+Html)
python·mysql·html
yingyima1 小时前
凌晨3点的警报声:定时任务监控与告警的最佳实践
前端
zach1 小时前
React中的兄弟通讯之发布订阅模式
前端·react.js
书中枫叶1 小时前
我用 Vue3 写了一个 Chrome 步骤录制插件:自动截图、本地存储、一键导出教程
前端·vue.js
达达尼昂1 小时前
AI Native 工程实践 : agent 自动化测试
前端·后端·架构