微信小程序开发入门（二）image标签及图片样式

最新推荐文章于 2024-05-19 00:00:00 发布
最新推荐文章于 2024-05-19 00:00:00 发布
阅读量7.6k 收藏 7
点赞数 1
分类专栏： 微信小程序开发 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43037257/article/details/121263395
版权
本文介绍了微信小程序中使用image标签显示图片的方法，包括创建图片文件夹、设置图片路径和使用rpx响应式单位调整图片尺寸。同时，文章讲解了如何将样式分离到wxss文件中，创建样式类优化代码结构，并展示了如何设置图片的margin-top实现布局调整。
摘要由CSDN通过智能技术生成

一、image标签显示一张图片

1、首先创建一个images文件夹，子文件夹avatar中下载数上图片，导入到项目跟目录下
2、在.wxml文件中，加上图片骨架标签
src属性可以设置图片路径

图片就显示到了屏幕上
3、绝对路径与相对路径
/开始代表项目根目录 /images/avatar/1.png
相对路径是从该文件夹向上到项目根目录，然后导航到该文件 …/…/images/avatar/1.png
4、文本标签 hello，11月
5、按钮标签

二、小程序rpx响应式单位的特点

1、我们发现图片图片变形了，没有显示出正常尺寸，因为image组件默认宽度是320px,高度240px
2、查看图片的实际尺寸，直接选中图片，右下角可以看到图片尺寸
在这里插入图片描述
这里在iPhone6模拟器下，设置属性style=“width:360px;highth:360px”，就显示出

最低0.47元/天 解锁文章
weixin_43037257
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于微信小程序项目的使用
ck2018182068的博客
11-10 443
微信小程序的基本概括
【微信小程序入门到精通】— button 和 image 超详细讲解
热爱生活，积极向上的阿酱！
10-03 5743
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！本文主要给大家介绍一下 button 和 image 组件，接下里我将逐一进行讲解！如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！大家每天都要开开心心的喔，让我们一起快乐的学习吧！
微信小程序一些常用的标签
最新发布
2202_75871191的博客
05-19 414
`navigator` 组件用于跳转页面，可以设置 `url`（跳转链接）和 `open-type`（跳转方式）。- 可以通过 `checked` 属性来控制它的选中状态，通过 `disabled` 属性来控制是否禁用。- 它包含多个 `swipe-item` 组件，每个 `swipe-item` 代表轮播图的一页。- 可以通过 `width`、`height`、`mode` 等属性来定义图片的显示样式。- 可以通过 `scroll-x` 和 `scroll-y` 属性来定义滚动方向。
HTML的img标签
HaoJJJJJ的博客
08-08 288
alt 属性 -------- 代替图片的文本内容（路径错误或者因为浏览器的原因图片显示不出来的时候，用 一段或者一个词描述一下这个图片）src属性 ------- 指的是图片的路径（绝对路径和相对路径）height------- 高度 单位是px(像素) %align ------ 位置 （图片和文字的位置）bottom ------ 下对齐 （默认值）right ---------- 右对齐。left -----------左对齐。width ------ 宽度。top ------ 上对齐。
小程序基础使用
m0_52578688的博客
05-27 3102
一、简介 微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 1.微信小程序与APP的区别 APP区别于IOS和Android系统但是微信小程序不在区别于系统，对于开发者来说，这是比较节省资金，对于用户来说，也不需要下载，做到了让用户即用即走。 2.微信小程序的开发 微信小程序的开发相对于pc端以及APP端比较简单，也更有利于用户的使用 二、小程序开发介绍 1.pa...
微信小程序学习日记~wxml(image)
weixin_42754381的博客
07-23 2721
<image scr='(*1)' style='(*2)' mode='(*3)'></image> (*1)  ../picture/picture.jpg   <!--图片地址--> (*2)  opacity:0.3;    <!-- 透明度：淡->实（0->1）--> <!-- (*2)  width:200px;...
微信小程序从入门到精通（案例）
08-20
本资源“微信小程序从入门到精通（案例）”是一份针对微信小程序开发的学习资料，包含实际操作的案例代码，帮助初学者快速理解和掌握微信小程序的开发技术。 首先，我们要了解微信小程序的基础架构。它基于...
微信小程序 Image组件实例详解
09-01
微信小程序中的`Image`组件是用于展示图像的关键组件，无论是网络图片还是本地资源，都可以通过设置`src`属性来加载。在小程序开发中，`Image`组件的应用无处不在，为用户界面添加丰富的视觉效果。 ### 1. 图片加载...
零基础微信小程序开发.rar
03-18
本教程“零基础微信小程序开发”专为初学者设计，旨在帮助新手快速入门并掌握微信小程序的开发流程。 1. **开发环境准备** - 安装微信开发者工具：微信官方提供了专门的开发者工具，它集成了代码编辑、预览、调试...
微信小程序入门--微网.zip
07-15
"微信小程序入门--微网.zip" 是一个压缩包，专门为初学者设计，帮助他们了解和掌握微信小程序的开发技术。 首先，我们要了解微信小程序的基础架构。它主要由四部分组成：wxml（WeChat Markup Language）、wxss...
微信小程序day03_11之媒体组件之image
Java持续实践
04-06 382
文章目录一. 媒体组件 image 的介绍二. 代码示例 一. 媒体组件 image 的介绍 image标签为图片。支持JPG、PNG、SVG格式，2.3.0 起支持云文件ID。 其属性如下: 二. 代码示例 wxml中的代码如下 <block wx:for="{{array}}"> <image src='{{src}}' mode='{{item.mode}}' styl...
微信小程序（八）实战——加载图片images
热门推荐
欢迎交流PHP和前端知识QQ：634487911
07-09 2万+
1.加载本地图片本地路径：/pages/images/1.png&lt;image class="widget_arrow" src="/pages/images/1.png" mode="aspectFill"&gt;&lt;/image&gt;在wxss中设置图片样式.widget_arrow{ width:25px; height:25px; }2.加载网络图片网络图片地...
微信小程序开发--添加照片水印（canvas ）
qq_31020171的博客
06-21 3592
当你在微信小程序中制作照片时，你可能需要添加水印，以便在分享时保护你的照片，并标识出你的品牌或网站。
微信小程序开发学习笔记——2.8媒体组件image的src三种引入方式
Qy_cm的博客
02-16 1926
>跟着b站up主“咸虾米_”学习中，把学习记录存到这方便后续查找。
HTML学习第八章(HTML图像--＜img＞标签)
Baileys_99的博客
03-05 4660
HTML学习第八章：HTML 图像标签：在 HTML 中，图像由 标签定义。img代表单词image，意为图像。 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。2.绝对路径与相对路径。相对路径：资源相对于当前网页的地址。绝对路径：资源的完整地址。
微信小程序wxml文件 image src 字段无非空处理 引发的编译时渲染层网络层错误
hubanbei2010的家园
12-23 986
背景： 商品加个promotion角标图片 商品可能出现在首页-你可能喜欢，也可能出现在搜索页，也可能出现在分类-pip页 现象： 天真的认为免测，开发mock代码 演示过了，基本可以直接close了。但为了保险，编译一把看看吧，没想到引发了一系列问题，花了一个小时沟通清楚了。 渲染层网络层错误] Failed to load local image resource /common/components/product-card/ the server responded with a...
【微信小程序开发（7）---img标签属性 以及 网络图片的上传与显示模拟】附：img 标签 实例
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-03 1677
app.json中已经配置 { "pages":[ "pages/demo09/demo09" ] } demo09.wxss image{ box-sizing: border-box; border: 1px solid red; width: 300px; height: 200px; } demo09.wxml <image mode="bottom" lazy-load src="https://s3.ax1x.com/2021/01/03/spvMSe.jpg" /&
【微信小程序】媒体组件（二）image
不想做菜鸟的小螃蟹
10-12 1564
记录一下image的使用，比较简单。 1.先看一下属性。 属性名 类型 默认值 说明 最低版本 src String   图片资源地址   mode String 'scaleToFill' 图片裁剪、缩放的模式   lazy-load Boolean false 图片懒加载。只针对page与scroll-vi
【Java 进阶篇】HTML 图片标签详解
繁依Fanyi的博客
10-07 873
img>标签是HTML中用于插入图像的主要标签，具有许多可用于控制图像显示的属性。使用这些属性，您可以轻松地在网页中插入图像并控制其外观和行为。请确保合理使用图像，以提高用户体验和网站性能。希望本文对您理解HTML图像标签和其属性有所帮助。如果您正在学习Web开发，这是一个重要的基础知识点，可以让您创建更具吸引力的网页。
微信小程序入门.docx
10-05
"微信小程序入门文档提供了一个关于微信小程序的基础教程，涵盖了小程序的定义、发展历程、特点，以及如何开始小程序的开发工作，包括注册开发者账号、下载开发者工具等步骤。" 微信小程序是一种轻量级的应用形态，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值