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.hqwc.cn/news/695826.html

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

相关文章

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

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

二叉树之左叶子的和

题目&#xff1a; 给定二叉树的根节点 root &#xff0c;返回所有左叶子之和。 示例 1&#xff1a; 输入: root [3,9,20,null,null,15,7] 输出: 24 解释: 在这个二叉树中&#xff0c;有两个左叶子&#xff0c;分别是 9 和 15&#xff0c;所以返回 24示例 2: 输入: root […

Android Studio开发之路(十)app中使用aar以及报错记录

书接上文&#xff1a;Android Studio开发之路&#xff08;九&#xff09;创建android library以及生成aar文件 五、app中使用aar文件的方法 先复制一下上面生成的aar文件。然后在你要添加到的app左上角选择“project”模式&#xff0c;然后找到libs文件夹&#xff0c;点击右键…

量化软件QMT如何获取板块成分股?内附免费开通方法

获取板块成分股列表 调用方法 from xtquant import xtdata xtdata.get_stock_list_in_sector(sector_name)参数 名称类型描述sector_namestring版块名称 返回 list 示例 from xtquant import xtdata # 获取沪深A股全部股票的代码 xtdata.get_stock_list_in_sector("…

电影《间谍过家家 大号:白》观后感

上周看了电影《间谍过家家 大号&#xff1a;白》&#xff0c;看这部电影之前&#xff0c;一直听说动漫《间谍过家家》挺不错的&#xff0c;但是一直都没有看&#xff0c;看完电影后&#xff0c;自己果断补完了这部动漫&#xff0c;大致了解前因后&#xff0c;这部电影&#xff…

【问题解决】编译大华的SDK版本时提示:error: unknown type name ‘bool‘

在linux下编译大华官网下载的SDK时&#xff0c;编译竟然报错了&#xff0c;提示未知的类型名&#xff1a;‘bool’, 因为在C语言标准(C89)没有定义布尔类型&#xff0c;所以会报错。 而C99提供了一个头文件<stdbool.h>定义了bool&#xff0c;true代表1&#xff0c;false代…

揭秘APP广告变现:轻松赚取收益的秘密武器,你还在等什么?

在移动互联网时代&#xff0c;APP广告变现已成为许多开发者和公司获取收益的重要方式。它如同一把秘密武器&#xff0c;帮助那些掌握了其使用技巧的人轻松赚取收益。那么&#xff0c;究竟什么是APP广告变现&#xff1f;又如何通过它轻松赚取收益呢&#xff1f;接下来&#xff0…

Web3加密空投入门:空投类型有哪些?如何避免限制?

今天分享空投如何避免限制以提高效率&#xff0c;增加成功几率&#xff0c;首先我们来了解什么是空投加密&#xff0c;有哪些空投类型。 一、什么是空投加密&#xff1f; 加密货币空投是一种营销策略&#xff0c;包括向用户的钱包地址发送免费的硬币或代币。 加密货币项目使用…

SQL Server中怎么排查死锁问题

一、背景 我们在UAT环境压测的时候&#xff0c;遇到了如下的死锁异常。 Caused by: com.microsoft.sqlserver.jdbc.SQLServerException: Transaction (Process ID 82) was deadlocked on lock resources with another process and has been chosen as the deadlock victim. Re…

Electron + GitHub Actions | 自动化流程详解

自动化部署 上篇介绍了 Electron Forge 打包应用教程。在实际开发中&#xff0c;自动化是提升效率和产出质量的关键。本篇我们将详细介绍如何将构建和发布 Electron 应用的过程自动化。 代码挂在 GitHub 仓库上&#xff0c;如果有帮助&#xff0c;记得给仓库点个赞&#xff1a…

STM32_HAL_系统定时器(SysTick)_实现计时

1介绍 系统定时器&#xff08;SysTick&#xff09;是ARM Cortex-M处理器系列中的一个特殊定时器&#xff0c;它不属于STM32F1系列微控制器的外设&#xff0c;而是处理器内部的一个组件。SysTick定时器的作用是为操作系统或其他需要精确时钟计数和中断服务的应用提供基础的时间…

SD-WAN供应商选择指南

企业网络日益演变&#xff0c;尤其是跨国企业、出海电商和外贸企业&#xff0c;其网络需求变得愈发复杂多样。SD-WAN技术因此备受瞩目&#xff0c;成为连接分支机构和数据中心的关键解决方案。然而&#xff0c;市面上的SD-WAN供应商众多&#xff0c;如何选择适合的服务商成为了…