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

如何在微信开发者工具中插入图片首先,在资源管理器一行,右键选择新建文件夹,将新建文件命名为image,该新建文件夹就会变为当前项目的媒体库之后右键image文件,选择在资源管理器中打开双击image文件,将你要的图片拖进去,那么在编辑器中就会出现你的图片(以下操作将图片布置在index页面为例)在index.wxml文件中:在下面这个代码之前<viewclass=”usermotto”><textclass=”user-motto”>{{motto}}</text>&

首先,在资源管理器一行,右键选择新建文件夹,将新建文件命名为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;
}

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/39159.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注