当前位置: 首页 > article >正文

九宫格 图片 自定义 路径

<image :src=" '../../static/img/' + item.urlname + '.png' "  class="u-w-82 u-h-82 u-p-t-36"></image>

使用场景:九宫格里含有多张图片
在这里插入图片描述
html

<view class="u-p-b-46 u-p-x-35">
		<u-grid :border="false" col='5'  @click="clickbase" >
			<u-grid-item v-for="(item,index) in baseList" :key="index">
				<image :src=" '../../static/img/' + item.urlname + '.png' "  mode="" class="u-w-82 u-h-82 u-p-t-36"></image>
				<text class="u-m-t-15">{{item.title}}</text>
			</u-grid-item>
		</u-grid>
	</view>	

js

	baseList: [{
						urlname: '1',
						title: '论文查重'
					},
					{
						urlname: '2',
						title: '代取快递'
					},
					{
						urlname: '3',
						title: '代办跑腿'
					},
					{
						urlname: '4',
						title: '返乡订票'
					},
					{
						urlname: '5',
						title: '旅游团建'
					},
					{
						urlname: '6',
						title: '在线课堂'
					},
					{
						urlname: '7',
						title: '在线点餐'
					},
					{
						urlname: '8',
						title: '校园小说'
					},
					{
						urlname: '9',
						title: '校园活动'
					},
					{
						urlname: '10',
						title: '校园二手'
					},
					{
						urlname: '11',
						title: '考研考公'
					},
					{
						urlname: '12',
						title: '雅思托福'
					},
					{
						urlname: '13',
						title: '周边兼职'
					},
					{
						urlname: '14',
						title: '社会百科'
					},
					{
						urlname: '15',
						title: '特惠电影'
					},
				],

在这里插入图片描述


http://www.kler.cn/news/136653.html

相关文章:

  • csdn要打开或者无法刷新内容管理,文章无法发布或者未保存成功(服务器超时)-->先保存在自己的电脑里
  • RHCSA笔记三
  • 轻松掌握Win10录屏技巧:四大神器推荐!
  • 测试一个股票行情API
  • 文件摆渡系统选型指南:如何找到最适合您的数据安全解决方案?
  • HCIP--1
  • Jetson JetPack-5.1.2-L4T-R35.4.1 修复libvargus内存损坏问题
  • 在springBoot中同时使用mysql和MongoDB
  • vue3使用pinia实现数据缓存
  • 算法设计与分析算法实现——删数问题
  • Node.js环境配置级安装vue-cli脚手架
  • Java面试题07
  • 一文了解:离散型制造业轻量化MES解决方案
  • SD3403/SS928 烧录 Uboot Kernel Rootfs是什么
  • WiFi 6的数据在发送端分片和在接收端重组的理解
  • 【快应用】快应用学习之兄弟组件通信
  • Vue框架学习笔记——创建Vue实例、实例与容器对应关系
  • C语言的5个内存段你了解吗?( 代码段/数据段/栈/堆)
  • Python将原始数据集和标注文件进行数据增强(随机仿射变换),并生成随机仿射变换的数据集和标注文件
  • 【C++ Primer Plus学习记录】for循环
  • 51.Sentinel微服务保护
  • 架构探索之路-第一站-clickhouse | 京东云技术团队
  • C++设计模式——单例模式
  • 基于单片机GPS轨迹定位和里程统计系统
  • 全国见!飞桨星河社区五周年,邀你共赴大模型盛宴!
  • 什么是调试和性能分析工具?