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.mzph.cn/news/836831.shtml

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

相关文章

SSH常用功能介绍-高级功能

一、介绍 SSH&#xff08;Secure Shell&#xff09;是一种用于远程登录和执行命令的网络协议&#xff0c;它提供了加密的连接&#xff0c;保证了数据的安全性。除了基本的远程登录功能外&#xff0c;SSH还提供了许多高级功能&#xff0c;以下是一些常用的高级功能介绍&#xf…

什么是 RAG,大模型微调,向量数据库的应用场景

原来向量数据库的应用场景是这样的&#xff01;按照我的理解&#xff0c;大模型其实是没有学习能力的&#xff0c;它就相当于一个真值表或者矩阵&#xff0c;给它输入&#xff0c;它就输出&#xff0c;在使用它的过程中它不会自己训练自己&#xff0c;改变既有的参数&#xff0…

3W 3KVAC隔离 宽电压输入 AC/DC 电源模块——TP03AL系列

TP03AL系列产品具有交直流两用、输入电压范围宽、高可靠性、低功耗、安全隔离等优点。广泛适用于工控和电力仪器仪表、智能家居等对体积要求苛刻、并对EMC 要求不高的场合&#xff0c;如果需要应用于电磁兼容恶劣的环境下必须添加EMC 外围电路。

栈结构(详解)

1.栈的概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&am…

立聪堂助听器29周年暨第九届助听使者活动圆满落幕

5月10日对于立聪堂来说是个特别的日子&#xff0c;这家专注于听力健康领域的公司迎来了29周年。同时&#xff0c;立聪堂第九届助听使者代表及其家人也受邀参观立聪堂南京总部&#xff0c;共庆29周年。 易被忽视的老人听力健康 大数据显示&#xff0c;我国65岁以上老人&#x…

SQLZOO:The JOIN operation

数据表&#xff1a;game-gaol-eteam game idmdatestadiumteam1team210018 June 2012National Stadium, WarsawPOLGRE10028 June 2012Stadion Miejski (Wroclaw)RUSCZE100312 June 2012Stadion Miejski (Wroclaw)GRECZE100412 June 2012National Stadium, WarsawPOLRUS... goal …

【重装系统】U盘制作软件——Rufus

Rufus 是一款格式化和创建 USB 启动盘的辅助工具。 本软件适用于以下场景&#xff1a; 需要将可引导 ISO (Windows、Linux、UEFI 等) 刻录到 USB 安装媒介的情况 需要处理未安装操作系统的设备的情况 需要在 DOS 环境下刷写 BIOS 或其他固件的情况 需要运行低级工具的情况 官…

WebSocket建立网络连接——小案例

WebSocket是一种实现全双工通信的网络技术标准&#xff0c;它允许在用户的浏览器和服务器之间进行持久的、双向的通信。以下是对WebSocket的具体介绍&#xff1a; 实时性&#xff1a;与传统HTTP请求相比&#xff0c;WebSocket提供了更高效的实时数据交换方式。一旦建立连接&am…

数据可视化(九):Pandas北京租房数据分析——房源特征绘图、箱线图、动态可视化等高级操作

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

【Golang】基于 excelize 的 Excel 工具包

目录 1. 安装excelize库2. Excel工具代码2.1 初始化Excel对象2.2. 常用操作2.2.1 设置窗格冻结2.2.2 设置工作表名称2.2.3 创建工作表2.2.4 设置单元格值2.2.5 设置单元格样式2.2.6 合并单元格2.2.7 设置行高和列宽 3.使用示例4.完整代码5.总结 在日常的开发中&#xff0c;我们…

操作抖音小店亏钱?是哪方面导致的?赶紧自查!

大家好&#xff0c;我是电商小V 我也经常去浏览网上的一些帖子&#xff0c;一些帖子就是说开抖音小店运营一年多了不出单&#xff0c;不转化&#xff0c;还亏钱&#xff0c;做不起来&#xff0c;很多人来问我&#xff0c;做抖音小店是不是不能赚钱&#xff1f; 关于这个问题&am…

04、 .java程序用 editplus 工具打开的过程及在 editplus 工具中配置 java/javac 命令的过程

EditPlus 工具的使用&#xff1a; 1、安装 editplus 工具的过程&#xff1a;其一、安装包地址&#xff1a;其二、安装步骤&#xff1a; 2、使用 editplus 工具打开 .java 程序的过程&#xff1a;其一、修改默认打开 .java 的工具&#xff1a;其二、效果展示&#xff1a; 3、在 …

安全测试工具BurpSuite安装和使用

1.安装 下载地址&#xff1a;https://pan.baidu.com/s/1YJbZGAfVKLsQmNeZYZXEeQ 提取码: yyds 打开cmd&#xff0c;运行以下指令&#xff0c;打开keygen界面&#xff1a; java -jar "C:\soft\BurpSuite v2.1\burp-loader-keygen-2.jar" 点击Run按钮&#xff0c;弹…

flash attention的CUDA实现探讨-V3

之前关于flash attention的实现参考添加链接描述,添加链接描述,添加链接描述 lash attention的数学变换:给定三个矩阵Q,K,V,形状都是[N,d],计算S=QK.T,然后针对dim=1做softmax,然后和V继续做矩阵乘法得到形状为[N,d]的输出矩阵O,即O=softmax(QK.T,dim=1)V。 下面本人的…

01-02-1

1、day10作业 使用的代码 #include<stdio.h> void change(int* i) {*i(*i) / 2; } int main() {int i 0;scanf("%d", &i);change(&i);printf("%d", i);return 0; } ​ ​ 2、day11作业 使用的代码 #include<stdio.h> #include<…

Kubernetes学习-集群搭建篇(二) 部署Node服务,启动JNI网络插件

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Kubernetes渐进式学习-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1. 前言 2. 部署Node服务 2.1. 前置环境安装 2.2. 将Node服务加…

【java9】java9新特性概述

经过4次的跳票&#xff0c;历经曲折的Java9最终在2017年9月21日发布。因为里面加入的模块化系统&#xff0c;在最初设想的时候并没有想过那么复杂&#xff0c;花费的时间超出预估时间。距离java8大约三年时间。 Java9提供了超过150项新功能特性&#xff0c;包括备受期待的模块…

MySQL基础入门【mysql初识 | 数据库操作 | 表操作 | sql数据类型】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;Linux_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一&#xff0c;为什么会有…

【鸿蒙+全国产瑞芯微】智慧楼宇解决方案 | 如何实现多场景下智慧化、精细化楼宇管理?

随着数字化、智能化与工作生活的联结日渐紧密&#xff0c;聚焦人性化服务&#xff0c;以数字和科技匹配多重需求&#xff0c;加速商业楼宇智能化转型的脚步&#xff0c;逐步形成智慧楼宇产品矩阵。 方案亮点 01/数字标牌——形象展示 企业文化宣传、公告通知等 播放内容统一远…

uni-app跨端兼容

1.样式兼容 小程序端不支持*选择器&#xff0c;可以使用&#xff08;view,text&#xff09; 页面视口差异(tabar页、普通页) H5端默认开始scoped 例如骨架屏样式出现问题&#xff0c;需要将之前的样式拷贝到骨架屏中 提示&#xff1a;H5端是单页面应用&#xff0c;scoped隔离…