微信小程序开发学习笔记——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,一经查实,立即删除!

相关文章

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…

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…

本机防攻击简介

定义 在网络中&#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;它是网络信息…

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

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

PHP学习笔记1——html标签以及头部元素页面布局

html是一种超文本标识符号&#xff0c;用来在网页中指定显示页面格式显示 基本格式 <!doctype html> <html><head><title></title> </head><body> </body></html> 包含声明&#xff0c;框架html&#xff0c;头部head&a…

怎么把公众号文章链接做成二维码?扫码查看公众号推文的方法

公众号是现在给用户分享内容的一种方式&#xff0c;通过输出优质的公众号文章内容来为关注者提供信息和内容。当我们发布公众号文章后&#xff0c;有些情况下会需要将公众号内容生成二维码之后&#xff0c;印刷到传单、展板上来显示&#xff0c;那么如何将公众号的文章链接转二…

Commonjs 和 Es Module详解

一 前言 今天我们来深度分析一下 Commonjs 和 Es Module&#xff0c;希望通过本文的学习&#xff0c;能够让大家彻底明白 Commonjs 和 Es Module 原理&#xff0c;能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。 带上疑问开始今天的分析&#xff1a; …

数字化转型导师坚鹏:城市数字化转型顶层规划方法

城市数字化转型顶层规划方法 课程背景&#xff1a; 很多城市存在以下问题&#xff1a; 不知道如何系统地开展数字化转型工作&#xff1f; 不清楚如何科学地制定数字化转型战略&#xff1f; 不知道如何高效地实施数字化转型战略&#xff1f; 课程特色&#xff1a; 有…

基于SpringBoot的在线拍卖系统设计与实现(源码+调试+LW+PPT)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。今天给大家介绍一篇基于SpringBoot的在线拍…

VSCode将某个字符替换为换行符并换行显示

不想每次去查了&#xff0c;我自己写博客记录一下~~~ 我的需求是一个一行的数据&#xff0c;用逗号分开&#xff0c;我希望竖着看有规律点&#xff0c;类似这样 快捷键其实想 optioncommandf &#xff0c;但是我每次都记不住&#xff0c;大家可以直接在编辑栏找到replace的地方…

Unity Meta XR SDK 快捷配置开发工具【Building Block/Quick Action/OVRCameraRigInteraction】

文章目录 &#x1f4d5;教程说明&#x1f4d5;Building Block&#x1f4d5;Quick Action&#x1f4d5;OVRCameraRigInteraction 此教程相关的详细教案&#xff0c;文档&#xff0c;思维导图和工程文件会放入 Spatial XR 社区。这是一个高质量 XR 社区&#xff0c;博主目前在内…