微信小程序开发学习笔记——2.8媒体组件image的src三种引入方式

news2024/11/14 20:15:26

>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。

课程连接: 

https://www.bilibili.com/video/BV19G4y1K74d?p=11

image:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

一、准备

右击pages点击在资源管理器中显示。

 新建一个static文件夹用来存放静态的文件。

在static里新建三个文件夹

将准备的图片拖到image文件夹里。

二、插入图片的方法:

1、插入本地的图片

<image src="../../static/image/1.jpg" mode=""/><!--相对路径-->
<image src="../../static/image/2.jpg" mode=""/><!--方法1-->
<image src="/static/image/gif1.gif" mode=""/><!--方法2-->

 

图片显示的比例很奇怪,因为这个image组件自动设置了宽高。 

2、调用网络的图片 

<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" mode=""/><!--方法3-->

建议不要用别人的,不然人家在他服务器里一删我们就用不了了,最好传到自己的服务器上,再获取一个网络地址。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1464014.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于springboot+vue的服装生产管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

【Chrono Engine学习总结】4-vehicle-4.3-两个vehicle碰撞测试

由于Chrono的官方教程在一些细节方面解释的并不清楚&#xff0c;自己做了一些尝试&#xff0c;做学习总结。 今天突发奇想&#xff0c;想试一下&#xff0c;是否可以实现两个vehicle的碰撞&#xff1f; 1、两辆vehicle的仿真 官方提供了demo_VEH_TwoCars这个demo&#xff0c…

「C#」WPF学习笔记-基础类及继承关系

1、DependencyObject DependencyObject是WPF中依赖属性系统的核心&#xff0c;它为WPF的数据绑定、动画和属性共享等功能提供了支持&#xff0c;是一个非常重要的基类。 其主要特点和职责包括&#xff1a; 依赖属性系统&#xff1a;DependencyObject 是所有支持依赖属性的类…

js设计模式:观察者模式

作用: 和发布订阅模式基本类似。 当某一对象状态发生变化时,所有的观察者都会收到通知。 vue响应式原理就是很经典的案例,数据发生变化,通知各个依赖。 示例: class TaobaoShop{constructor(){this.list []}addSub(name,data){this.list.push({name,data})}pubUser(name,d…

Web3 基金会推出去中心化之声计划:投入高额 DOT 和 KSM ,助力去中心化治理

作者&#xff1a;Web3 Foundation Team 编译&#xff1a;OneBlock 原文&#xff1a;https://medium.com/web3foundation/decentralized-voices-program-93623c27ae43 Web3 基金会为 Polkadot 和 Kusama 创建了去中心化之声计划&#xff08;Decentralized Voices Program&…

【Java多线程】分析线程加锁导致的死锁问题以及解决方案

目录 1、线程加锁 2、死锁问题的三种经典场景 2.1、一个线程一把锁 2.2、两个线程两把锁 2.3、N个线程M把锁&#xff08;哲学家就餐问题&#xff09; 3、解决死锁问题 1、线程加锁 其中 locker 可以是任意对象&#xff0c;进入 synchronized 修饰的代码块, 相当于加锁&…

亚信安慧AntDB数据库为实时流数据构筑坚实防线

在数字化浪潮中&#xff0c;企业对实时流数据处理的依赖日益增强。在此背景下&#xff0c;AntDB数据库应运而生&#xff0c;提供一种创新性解决方案&#xff0c;专注于解决实时流数据处理中的数据容灾和一致性问题。AntDB的设计理念是确保在处理高吞吐量的流数据时&#xff0c;…

web前端安全性——CSRF跨站请求伪造

承接上篇讲述的XSS跨站脚本攻击 跨站请求伪造&#xff08;CSRF&#xff09; 1、概念 CSRF(Cross-site request forgery) 跨站请求伪造:攻击者诱导受害者进入第三方网站&#xff0c;在第三方网站中&#xff0c;向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注…

【Git】:标签功能

标签功能 一.标签操作二.推送远程标签 标签 tag &#xff0c;可以简单的理解为是对某次commit的⼀个标识&#xff0c;相当于起了⼀个别名。例如&#xff0c;在项⽬发布某个版本的时候&#xff0c;针对最后⼀次commit起⼀个v1.0这样的标签来标识⾥程碑的意义。这有什么⽤呢&…

代码随想录算法训练营第21天—回溯算法01 | ● 理论基础 ● *77. 组合

理论基础 回溯是一种纯暴力搜索的方法&#xff0c;它和递归相辅相成&#xff0c;通常是执行完递归之后紧接着执行回溯相较于以往使用的for循环暴力搜索&#xff0c;回溯能解决更为复杂的问题&#xff0c;如以下的应用场景应用场景 组合问题 如一个集合{1,2,3,4}&#xff0c;找…

【讨论】Web端测试和App端测试的不同,如何说得更有新意?

Web 端测试和 App 端测试是针对不同平台的上的应用进行测试&#xff0c;Web应用和App端的应用实现方式不同&#xff0c;测试时的侧重点也不一样。 Web端应用和App端应用的区别&#xff1a; 平台兼容性 安装方式 功能和性能 用户体验 更新和维护 测试侧重点有何不同 平台…

springboot208基于springboot物流管理系统

基于spring boot物流管理系统设计与实现 摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。…

想高薪就业鸿蒙HarmonyOS 开发岗位,到底该学习些啥?

鸿蒙是什么&#xff1f; 经过十多年的发展&#xff0c;传统移动互联网的增长红利已渐见顶。万物互联时代正在开启&#xff0c;应用的设备底座将从几十亿手机扩展到数百亿 IoT 设备。GSMA 预测到 2025 年&#xff0c;全球物联网终端连接数量将达 246 亿个&#xff0c;其中消费物…

redis源码阶段性完成

这个真的是耗费我很长的时间 一个是太忙了&#xff0c;一个是内容确实太多了 断断续续的&#xff0c;终于基本完成了&#xff0c;但也只限于基本哈 在这期间也阅读了相关书籍 其实书籍讲的都很好&#xff0c;讲了大体思路 但是&#xff0c;到具体实现细节就复杂的多了 因…

【2024 R1 版本更新】Ansys Speos

上期我们讲到了Ansys系列的三大光学软件于2024年的更新&#xff0c;在小宇快马加鞭的信息收集下&#xff0c;更加具体的内容也整理完毕了&#xff0c;一起来看看Ansys Speos又有哪些具体的功能更新吧~

智能搬运机器人|海格里斯将如何持续推进工业和物流的智能化升级与发展?

存取、搬运、分拣是物流行业中的通用功能&#xff0c;但具体到每个行业又十分不同&#xff0c;例如&#xff1a;新能源电池领域&#xff0c;它所搬运的东西是电池&#xff0c;50KG~200KG&#xff1b;快递行业领域&#xff0c;所要处理的物料是那种扁平件和信封等等&#xff0c;…

【计算机网络】网络基础知识

一. 网络发展史 独立模式&#xff08;单机模式&#xff09;&#xff1a;计算机之间相互独立&#xff0c;各自拥有独立的数据。 网络互连&#xff1a;将多台计算机连接在一起&#xff0c;完成数据共享。 随着时代的发展&#xff0c;越来越需要计算机之间进行互相通信&#…

人工智能_CPU安装运行ChatGLM大模型_ChatGlm-6B_启动命令行对话_安装API调用接口_005---人工智能工作笔记0100

然后我们再进入 /data/module/ChatGLM-6B-main文件夹 然后我们去启动,命令行工具 python3 cli_demo.py 可以看到也是可以用了. 正常可以用了. 然后主要来看,如何使用api来调用呢,这样才可以,做自己的界面 可以看到就非常简单了只需要: 走到 /data/module/

高盛:日本这轮通胀是否可持续,关键看房租

租金在日本CPI中的权重高达20%&#xff0c;高盛预计短期内租金将继续拖累通胀至1.7%或以下&#xff0c;长期有望温和上行&#xff0c;使通胀稳在2%的水平。 日本正在转向“去通缩”&#xff0c;房租能否支撑通胀态势&#xff1f; 在日股今年一路高歌、有望“收复失地”时&…

如何在OpenWRT安装内网穿透工具实现远程访问本地搭建的web网站界面

文章目录 前言1. 检查uhttpd安装2. 部署web站点3. 安装cpolar内网穿透4. 配置远程访问地址5. 配置固定远程地址 前言 uhttpd 是 OpenWrt/LuCI 开发者从零开始编写的 Web 服务器&#xff0c;目的是成为优秀稳定的、适合嵌入式设备的轻量级任务的 HTTP 服务器&#xff0c;并且和…