当前位置：首页 > 行业动态 > 正文

html图片预览

配合JS实现图片实时预览，利用FileReader读取并生成

HTML图片预览基础

图片标签基本用法

<img src="image.jpg" alt="描述信息" />
  • src：图片路径（必填）
  • alt：替代文本（必填，提升无障碍访问）：鼠标悬停提示文字

常用属性配置表

属性 作用 示例值
width/height 固定宽高（支持像素/百分比） width=”200″
loading 懒加载控制 loading=”lazy”
style 行内样式控制 style=”border-radius:5px”
crossorigin 跨域策略 crossorigin=”anonymous”

交互事件处理

// 点击切换图片
let current = 0;
const images = ["img1.jpg", "img2.jpg", "img3.jpg"];
function changeImage() {
    document.getElementById("myImage").src = images[current++ % images.length];
}

响应式样式控制

/ 自适应容器 /
.responsive-img {
    max-width: 100%;
    height: auto;
}
/ 保持比例裁剪 /
.cover-img {
    object-fit: cover;
    width: 100%;
    height: 300px;
}

常见问题与解决方案

Q1：如何实现图片加载失败时的替代方案？

A1：使用onerror事件监听,当图片加载失败时替换备用图：

html图片预览 第1张

<img id="mainImg" src="primary.jpg" alt="主图" 
    onerror="this.src='fallback.jpg'; this.alt='备用图'" />

Q2：怎样优化多图页面的性能？

A2：采用懒加载技术,仅加载视口内图片：

<img src="placeholder.jpg" data-src="real.jpg" loading="lazy" 
    onload="this.src=this.dataset.src">

配合<picture>元素可进一步优化：

<picture>
    <source srcset="small.webp" type="image/webp" media="(max-width:600px)">
    <img src="default.jpg" alt="优化图
0

相关文章