HTML网页中显示图片(相对路径 绝对路径)

本文详细介绍了在HTML中插入和显示图片的方法,包括使用<img>标签的src属性指定图片URL,以及设置图片的宽高。针对图片无法显示的问题,提供了两种解决方案:一是检查本地图片的路径,包括绝对路径和相对路径的正确使用;二是确保网络图片的URL准确无误。此外,还强调了在项目中如何通过调整相对路径来正确引用不同文件夹中的图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML网页中显示图片使用标签<img>

要在页面上显示图像,需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是:<img src="url" />
定义图片大小:<img src="url" width="x" height="y"/>

URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

但有时我们添加的图片无法显示
在这里插入图片描述
下面给出一些解决方法:

一.html插入本地图片

下载图片到本地

1.绝对路径

<img src="D:\mysite\templates/eg_cute.gif" width="300" height="300" />
其中D:\mysite\templates/eg_cute.gif为图片路径
一般路径没有问题,图片没有问题,显示就不会出错

2.相对路径

将图片和html文件放在同一路径下,在编写html文件时就只用写文件的相对路径了
在这里插入图片描述
main_page.html和eg_cute.gif都在template 文件夹里面
编写时url只用写图片的名称即可:
<img src="eg_cute.gif" width="300" height="300" />
正常显示
在这里插入图片描述
但是在一个project里面我们一般会想要将html和图片分开存放
存放在不同的文件夹里面,也可以使用相对路径
如图片存放在img文件夹下面,html存放在template文件夹下面,找到他们的公共根目录mysite
在这里插入图片描述
此时图片的url改为/mysite/img/eg_cute.gif即可

二.html插入网页图片

确保图片地址正确即可(有后缀 .jpg .png等后缀名)
如:插入csdn的logo
先复制图片地址(右击选择复制图片 链接)
在这里插入图片描述
图片链接为https://img-home.csdnimg.cn/images/20201124032511.png

修改html代码即可
<img src="https://img-home.csdnimg.cn/images/20201124032511.png" width="300" height="200" />

正常显示
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值