html怎么读入网站图片

使用 <img> 标签引入本地或外部图片

HTML 通过 <img> 标签加载图片,支持本地路径或网络URL。

示例代码：

<!-本地图片 -->
<img src="images/logo.png" alt="公司Logo" loading="lazy">
<!-网络图片 -->
<img src="https://example.com/image.jpg" alt="示例图片">

通过CSS背景引入图片

使用 background-image 属性设置元素背景图,适合装饰性图片。

示例代码：

<div class="bg-container"></div>
<style>
.bg-container {
  width: 100%;
  height: 300px;
  background-image: url('https://example.com/bg.jpg');
  background-size: cover; / 拉伸填充 /
  background-position: center; / 居中对齐 /
}
</style>

动态加载图片（JavaScript）

通过脚本动态创建 <img> 标签或修改 src 属性。

<script>
// 方法1：创建新图片
const img = document.createElement('img');
img.src = 'https://example.com/dynamic.jpg';
img.alt = '动态加载的图片';
document.body.appendChild(img);
// 方法2：修改现有图片
document.getElementById('targetImg').src = 'https://example.com/new.jpg';
</script>

注意事项

1. 跨域限制
   直接引用外部网站图片时，需确保目标服务器允许跨域访问（通过CORS头）,否则浏览器会阻止加载。

2. 图片优化

   • 使用WebP等现代格式减小体积。
   • 通过 srcset 实现响应式图片（适配不同设备分辨率）。
   • 延迟加载（loading="lazy"）提升首屏速度。

3. 版权问题
   确保有权限使用目标图片,避免侵权风险。

   img.responsive {
   max-width: 100%;
   height: auto;
   }

   问题2：如何预加载图片以减少加载延迟？

   解答：
   使用 <link> 标签的 rel="preload" 属性提前加载关键图片。
   示例：

   <link rel="preload" href="https://example.com/large.jpg" as="image">
   <img src="https://example.com/large.jpg" alt="预加载