js图片回显的方法

直接上代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>// HTML部分<input type="file" id="fileInput"><button onclick="showImage()">显示图片</button><div id="imageContainer"></div><script>function showImage() {var fileInput = document.getElementById('fileInput');var imageContainer = document.getElementById('imageContainer');var file = fileInput.files[0];var reader = new FileReader();reader.onload = function(e) {var img = document.createElement('img');img.src = e.target.result;imageContainer.innerHTML = '';imageContainer.appendChild(img);};reader.readAsDataURL(file);}</script></body>
</html>

效果图:

第二种方法:

// 定义上传图片的URL
let urls = "http://jingxun.zhbbll.asia/";
//图片路径
icon = shopdata[i].icon;
//回显图片
document.querySelector('.image img').src = urls+icon;

希望可以帮到大家

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

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

相关文章

Django项目运行报错:ModuleNotFoundError: No module named ‘MySQLdb‘

解决方法&#xff1a; 在__init__.py文件下&#xff0c;新增下面这段代码 import pymysql pymysql.install_as_MySQLdb() 注意&#xff1a;确保你的 python 有下载 pymysql 库&#xff0c;没有的话可以使用 pip install pymysql安装 原理&#xff1a;用pymysql来代替mysqlL…

外卖系统微信小程序支付

微信小程序支付时序图 其中第9.步骤就是微信小程序前端调用wx.requestPayment

Kotlin基本特性

目录 函数 if when 循环 面向对象 继承 主构造函数 接口 修饰符 ​编辑数据类 单例类 Lambda编程 集合 lambda用法 常见函数式API 空指针 判空辅助工具 字符串内嵌表达式 函数 fun add1(a:Int,b:Int):Int{return ab }fun add2(a:Int,b:Int):Int ab // 只…

【class3】人工智能初步(词频统计)

最后回顾一下读取和处理数据的过程&#xff0c;具体方法如下&#xff1a;1. 读取CSV文件STEP1 导入csv模块STEP2 打开文件STEP3 读取文件2. 标准化处理STEP1 先创建一个空列表&#xff0c;用于存储reader对象中的值STEP2 遍历reader对象STEP3 将reader对象中的每行数据添加到空…

力扣127.单词接龙讲解

距离上一次刷题已经过去了.........嗯............我数一一下............整整十天&#xff0c;今天再来解一道算法题 由于这段时间准备简历&#xff0c;没咋写博客。。今天回来了&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&…

N5183B是德科技n5183b信号源

181/2461/8938产品概述&#xff1a; 简  述&#xff1a; N5183B 频率范围&#xff1a;9 kHz 至 20 GHz&#xff0c;具有 AM、FM、相位调制功能。N5183B MXG X 系列微波模拟信号发生器拥有 9 kHz 至 40 GHz 的频率覆盖范围&#xff0c;以及接近 PSG 级别的相位噪声性能&…

Java 【数据结构】 哈希(Hash超详解)HashSetHashMap【神装】

登神长阶 第十神装 HashSet 第十一神装 HashMap 目录 &#x1f454;一.哈希 &#x1f9e5;1.概念 &#x1fa73;2.Object类的hashCode()方法: &#x1f45a;3.String类的哈希码: &#x1f460;4.注意事项: &#x1f3b7;二.哈希桶 &#x1fa97;1.哈希桶原理 &#x…

Github 2024-05-12 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-12统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目5Python项目2非开发语言项目2Vue项目1Rust项目1AFFiNE: 下一代知识库 创建周期:649 天开发语言:TypeScript协议类型:OtherSta…

【简单介绍下Sass】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

基于物联网的教室人数检测系统-设计说明书

设计摘要&#xff1a; 本设计基于物联网技术&#xff0c;实现了一个教室人数检测系统。系统利用STM32单片机作为中控&#xff0c;通过红外对管检测人员进出教室&#xff0c;并实时统计应到人数和实到人数&#xff0c;同时使用OLED显示屏显示相关信息。系统还通过温湿度传感器检…

如何使用 WavLM音频合成模型

微软亚洲研究院与 Azure 语音组的研究员们提出了通用语音预训练模型 WavLM。通过 Denoising Masked Speech Modeling 框架&#xff08;核心思想是通过预测被掩蔽&#xff08;即遮蔽或删除&#xff09;的语音部分来训练模型&#xff0c;同时还包括去噪的过程&#xff09;&#x…

YOLOv9最新改进系列:融合空间信息关注机制(SimAM)于YOLOv9网络,在通道之间和空间位置之间建立更加准确的关联,助力YOLOv9有效涨点!!!

YOLOv9最新改进系列&#xff1a;融合空间信息关注机制&#xff08;SimAM&#xff09;于YOLOv9网络&#xff0c;在通道之间和空间位置之间建立更加准确的关联,助力YOLOv9有效涨点&#xff01;&#xff01;&#xff01; 在此之前&#xff01;先恭喜两位家人&#xff01;&#xf…

Spring MVC 介绍及其使用(详细)

目录 一.什么是SpringMVC呢&#xff1f; 1.1MVC的介绍 1.2SpringMVC和MVC的关系 二.SpringMVC的学习 第一步&#xff1a;创建项目 第二步&#xff0c;SpringMVC的连接 第三步&#xff0c;Spring MVC获取参数 第四步 SpringMVC的输出 总结 特点和优势 核心组件 一.什…

如何获得临时谷歌邮箱?

什么是临时谷歌邮箱&#xff1f; 临时谷歌邮箱&#xff0c;也称为一次性谷歌邮箱或匿名谷歌邮箱&#xff0c;可以用来作为你的个人临时谷歌邮箱账户&#xff0c;而不需要亲自注册谷歌账户就可以使用。这些邮箱在一定时间后自动销毁&#xff0c;期间无需用户进行任何操作。它们…

2023.5.12 第43周周报

学习时间&#xff1a;2023.5.5-2023.5.12 学习内容&#xff1a; 1、answer question: img&#xff1a; 看到有论文说应该让图像和文本的潜在嵌入具有相似和合理的数值范围【-2&#xff0c;2】 调试发现模型的文本图像的潜在嵌入虽然符合&#xff0c;但相差较大。 在将文本和…

2.2、Gitea忘记密码重置密码

忘记密码后&#xff0c;管理员可以使用gitea的主程序输入命令重置密码。 gitea admin user change-password --username myname --password asecurepassword

linux性能监控之slabtop

slabtop命令是以实时的方式显示内核slab缓冲区的细节信息&#xff0c;是linux自带的命令 [rootk8s-master ~]# slabtop --helpUsage:slabtop [options]Options:-d, --delay <secs> delay updates-o, --once only display once, then exit-s, --sort <char&…

学浪app的课程怎么导出来

在这个知识如星辰般璀璨的时代&#xff0c;学浪app汇聚了无数智慧的火花&#xff0c;点亮了求知者的前行之路。你是否曾在学浪的海洋中遨游&#xff0c;汲取知识的甘露&#xff0c;却渴望将那些珍贵的课程内容&#xff0c;如同宝藏一般&#xff0c;从数字的海洋中提取出来&…

【0003day】VOSviewer分析

这个软件也可以用知网&#xff0c;也可以用web of science。 首先&#xff0c;需要创建数据。这个数据如何创建&#xff0c;需要参考对应的教程。&#xff08;本文以web of science为平台来做分析。&#xff09; 首先&#xff0c;创建对应的数据库。 一直下一步 让后选择完…

Linux(Ubuntu24.04) 安装 MinIO

本文所使用的 Ubuntu 系统版本是 Ubuntu 24.04 ! # 1、下载 MinIO wget https://dl.min.io/server/minio/release/linux-amd64/minio# 2、添加可执行权限 chmod x minio# 3、导出环境变量&#xff0c;用于设置账号密码&#xff0c;我设置的账号和密码都是 minioadmin export MI…