如何在微信开发者工具中插入图片

首先,在资源管理器一行,右键选择新建文件夹,将新建文件命名为image,该新建文件夹就会变为当前项目的媒体库
在这里插入图片描述
之后右键image文件,选择在资源管理器中打开在这里插入图片描述
双击image文件,将你要的图片拖进去,那么在编辑器中就会出现你的图片在这里插入图片描述

(以下操作将图片布置在index页面为例)
在index.wxml文件中:
在下面这个代码之前

<view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view> -->

插入代码

<image src="../(该图片的相对路径)" class="i1"></image>

插入这个代码之后,把这个代码上面的其他代码全部删掉,但是还有一个问题

怎么获得图片的相对路径呢?
在image文件夹下面,右键你想要放进小程序的图片文件
选择复制相对路径即可获得

完成以上步骤之后
在index.wxss文件中,
最下面添加

.i1 {
  margin-top: 50px;
  width: 100%;
  height: 200px;
}

点击编译就可以实现在小程序插入图片啦,想调整大小就在上面这一块的代码上面调整,具体上面的数值都是些什么意思,大家可以自己适当将数值放大缩小,点击编译看效果就可以知道啦

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值