当前位置: 首页 > news >正文

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.lryc.cn/news/347916.html

相关文章:

  • Java中的maven的安装和配置
  • 轴承制造企业“数智化”突破口
  • UIButton案例之添加动画
  • C#链接数据库、操作sql、选择串口
  • 本地搭建各大直播平台录屏服务结合内网穿透工具实现远程管理录屏任务
  • macos使用yarn创建vite时出现Usage Error: The nearest package directory问题
  • 【JAVA入门】Day04 - 方法
  • 前端报错 SyntaxError: Unexpected number in JSON at position xxxx at JSON.parse
  • Mybatis进阶详细用法
  • Android 系统省电软件分析
  • 了解什么是Docker
  • ChatGPT开源的whisper音频生成字幕
  • 融知财经:期货和现货的区别是什么?哪个风险大?
  • Android Studio开发之路(十)app中使用aar以及报错记录
  • sql-行转列3(转置)
  • MATLAB | 最新版MATLAB绘图速查表来啦!!
  • web安全之登录框渗透骚姿势,新思路
  • 无人机+自组网:空地点对点无人机通信解决方案
  • android TV app适配遥控器思路,recycleview选中放大
  • python篇-cmd 执行pip命令失败,但执行pyhon命令正常
  • Redis系列-3 Redis缓存问题
  • 【数据结构】堆(Heap)
  • vue cli 自定义项目架子,vue自定义项目架子,超详细
  • flink cdc,读取datetime类型
  • Kotlin 编译器和工具链:深入解析与实践案例
  • kettle
  • Maven 自动化构建
  • Unicode字符集和UTF编码
  • echarts默认图例(横线+圈圈)
  • Shell脚本的基础和变量