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

>>跟着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.mzph.cn/news/696483.shtml

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

相关文章

如何在Python中执行Shell脚本?

Python执行Shell命令 1、背景概述2、Python集成Shell及数据交互 1、背景概述 Python作为一种强大的脚本语言&#xff0c;其易用性和灵活性使得它成为自动化任务的理想选择。在Python中执行Shell脚本可以实现一些操作系统级的功能&#xff0c;使程序更加灵活、易理解和易维护 在…

Redis-内存管理

Redis是基于内存存储的&#xff0c;非关系型&#xff0c;键值对数据库。因此&#xff0c;对Redis来说&#xff0c;内存空间的管理至关重要。那Redis是如何内存管理的呢&#xff1f; 一、最大内存限制 Redis 提供了 maxmemory 参数允许用户设置 Redis 可以使用的最大内存大小。…

js设计模式:依赖注入模式

作用: 在对象外部完成两个对象的注入绑定等操作 这样可以将代码解耦,方便维护和扩展 vue中使用use注册其他插件就是在外部创建依赖关系的 示例: class App{constructor(appName,appFun){this.appName appNamethis.appFun appFun}}class Phone{constructor(app) {this.nam…

Elastic Search:构建语义搜索体验

当你逐步熟悉 Elastic 时&#xff0c;你将使用 Elasticsearch Relevance Engine™ (ESRE)&#xff0c;该引擎旨在为 AI 搜索应用程序提供支持。 借助 ESRE&#xff0c;你可以利用一套开发人员工具&#xff0c;包括 Elastic 的文本搜索、向量数据库和我们用于语义搜索的专有转换…

ngnix网站服务详解

一 Nginx的简介 1 Nginx&#xff1a; ①Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器&#xff0c;而且支持热部署&#xff0c;几乎可以做到 7 * 24 小时不间断运行&#xff0c;即使运行几个月也不需要重新启动&#xff0c;还能在不间断服务的情况下对软件版本进行热…

2月22日作业,按键中断LED灯控制

1.使用GPIO子系统&#xff0c;编写LED驱动&#xff0c;应用程序测试 mychrdev.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include <linux/of.h> …

微软Azure OpenAI的 GPT 接口使用小结

直接使用OpenAI的 GPT服务&#xff0c;在国内环境使用上会一些相关问题&#xff0c;微软提供了OpenAI的服务&#xff0c;基本上可以满足的相关的需要。下面提供一些简单的使用操作&#xff0c;来让你快速使用到 GPT 的服务。 前提&#xff1a;注册Azure的账户&#xff0c;并绑…

OpenCV中的normalize函数以及NORM_MINMAX、NORM_INF、NORM_L1、NORM_L2具体应用介绍

在OpenCV中&#xff0c;normalize函数用于将图像或矩阵的值规范化到一个特定的范围内。这在图像处理中非常有用&#xff0c;比如在调整图像的对比度、准备数据进行机器学习处理时。规范化可以提高不同图像之间的可比性&#xff0c;或是为了满足特定算法对数据范围的要求。 nor…

数的反码和补码表示

2.反码 反码的表示方法是: 正数的反码是其本身负数的反码是在其原码的基础上,符号位不变&#xff0c;其余各个位取反 [1][000000011原[000000011反[-1][10000001]原[11111110]反 3.补码 补码的表示方法是: 正数的补码就是其本身 负数的补码是在其原码的基础上,符号位不变,其余各…

36、IO进程线程/进程和线程之间的通信练习

一、使用有名管道完成两个进程的相互通信(提示&#xff1a;可以使用多进程或多线程完成)。 代码1&#xff1a;创建两个有名管道文件 #include<myhead.h>int main(int argc, const char *argv[]) {if(mkfifo("./mingtohua",0664)-1)//创建小明向小华发信息的管…

Stable Diffusion 绘画入门教程(webui)-ControlNet(深度Depth)

上篇文章介绍了线稿约束&#xff0c;这篇文章介绍下深度Depth 文章目录 一、选大模型二、写提示词三、基础参数设置四、启用ControlNet 顾名思义&#xff0c;就是把原图预处理为深度图&#xff0c;而深度图可以区分出图像中各元素的远近关系&#xff0c;那么啥事深度图&#xf…

c/c++ | 字符串函数总结 | 为什么总喜欢纠结sizeof 和strlen 呢?

其实时间长了&#xff0c;稍微研究后&#xff0c;再来品味&#xff0c;别有一番滋味 总是看着混乱&#xff0c;但是静下来看&#xff0c;还是能琢磨透的&#xff0c;只是看着复杂&#xff0c;本质是两套风格&#xff0c;然后又要有交集&#xff0c;所以就看起来复杂 // 首先字符…

目标管理SMART原则

SMART原则是一种目标管理方法&#xff0c;它包括以下五个要素&#xff1a; 具体性&#xff08;Specific&#xff09;&#xff1a;目标应该是明确的&#xff0c;具体地说明要达成的行为标准。例如&#xff0c;一个目标可能描述为“减少客户投诉率”&#xff0c;而不是“增强客户…

本机防攻击简介

定义 在网络中&#xff0c;存在着大量针对CPU&#xff08;Central Processing Unit&#xff09;的恶意攻击报文以及需要正常上送CPU的各类报文。针对CPU的恶意攻击报文会导致CPU长时间繁忙的处理攻击报文&#xff0c;从而引发其他业务的中断甚至系统的中断&#xff1b;大量正常…

惠尔顿 网络安全审计系统 任意文件读取漏洞复现

0x01 产品简介 惠尔顿网络安全审计产品致力于满足军工四证、军工保密室建设、国家涉密网络建设的审计要求&#xff0c;规范网络行为&#xff0c;满足国家的规范&#xff1b;支持1-3线路的internet接入、1-3对网桥&#xff1b;含强大的上网行为管理、审计、监控模块&#xff1b…

【2024软件测试面试必会技能】Requests(5):Requests模块_设置代理

设置代理 代理&#xff08;英语&#xff1a;Proxy&#xff09;&#xff0c;也称网络代理&#xff0c;是一种特殊的网络服务&#xff0c;英文全称是&#xff08;Proxy Server&#xff09;&#xff0c;其功 能就是代理网络用户去取得网络信息。形象的说&#xff1a;它是网络信息…

正向代理和反向代理释义

代理 客户端 代理 服务端 对客户端而言&#xff0c;代理是服务端&#xff1b;对服务端而言&#xff0c;代理是客户端。这个很好理解吧&#xff0c;以祖孙三代关系为例&#xff0c;爸爸在儿子面前是爸爸&#xff0c;爸爸在爷爷面前是儿子。 无论是正向代理还是反向代理&#…

Android14 InputManager-ANR原理

目标窗口查找时&#xff0c;作为派发目标的窗口必须已经准备好接收新的输入事件&#xff0c;否则判定窗口处于未响应状态&#xff0c;终止事件的派发过程&#xff0c;并在一段时间后再试。倘若5s后窗口仍然未准备好接收输入事件&#xff0c;将导致ANR。直接引发ANR的原因有很多…

操作系统学习记录

系统篇 内核 应用和底层硬件&#xff08;CPU、内存、硬盘等&#xff09;的连接桥梁。 用户态和内核态 CPU和进程可以在两种态下运行。 内核态可以直接访问所有硬件资源&#xff0c;用户态需要通过“系统调用”陷入到内核态才能否则只能访问用户空间地址的内存&#xff08;虚…

P8630 [蓝桥杯 2015 国 B] 密文搜索

P8630 [蓝桥杯 2015 国 B] 密文搜索 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P8630 题目分析 基本上是hash的板子&#xff0c;但实际上对于密码串&#xff0c;只要判断主串中任意连续的八个位置是否存在密码串即可&#xff1b;那么我们…