Html中<img src=""/>图片路径的使用方式

本文介绍了在HTML中如何根据不同情况正确设置图片路径,包括本地相对路径、绝对路径及网络路径等,帮助开发者解决实际项目中遇到的图片加载问题。

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

1、*html文件跟*.jpg文件(f盘)在不同目录下:

       <img src="file:///f:/*jpg" width="300" height="120"/>

2、*.html文件跟*.jpg图片在相同目录下:

        <img src=".jpg" width="300" height="120"/>;

 3、*.html文件跟*.jpg图片在不同目录下:

       a、图片*.jpg在image文件夹中,*html跟image在同一目录下:

            <img src="image/*jpg/"width="300" height="120"/>

        b、图片*jpg在image文件夹中,*html在connage文件夹中,image跟connage在同一目录下:

            <img src="../image/*jpg/"width="300" height="120"/>

  4、如果图片来源于网络,那么写绝对路径:

           <img src="http://image.baidu.com/pcindexhot"/width="300" height="120"/>

下面是修改后的代码,可以实现鼠标移入哪一栏显示对应图片: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body> <table border="1" width="310px" cellspacing="0" align="center" > <tr> <td>女靴</td> <td rowspan="9"><img id="product-img" src="../images/女靴.jpg"></td> <td>女包</td> </tr> <tr> <td>雪地靴</td> <td>男包</td> </tr> <tr> <td>冬裙</td> <td>登山鞋</td> </tr> <tr> <td>呢大衣</td> <td>皮带</td> </tr> <tr> <td>毛衣</td> <td>围巾</td> </tr> <tr> <td>棉服</td> <td>皮衣</td> </tr> <tr> <td>女裤</td> <td>男毛衣</td> </tr> <tr> <td>羽绒服</td> <td>男棉服</td> </tr> <tr> <td>牛仔裤</td> <td>男靴</td> </tr> </table> <script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("td").mouseenter(function(){ var index = $(this).index(); var imgSrc = "../images/" + $("tr:first-child td").eq(index).text() + ".jpg"; $("#product-img").prop("src", imgSrc); }); }); </script> </body> </html> ``` 具体来说,修改了以下部分: 1. 在 `<img>` 元素上添加了一个 `id` 属性,方便在 JavaScript 中引用该元素。 2. 在 JavaScript 代码中,使用了 `$("td").mouseenter()` 选择器来选择所有 `<td>` 元素,并在鼠标移入时绑定事件处理函数。 3. 在事件处理函数中,通过 `$(this).index()` 方法获取当前鼠标所在的列号,然后使用 `$("tr:first-child td").eq(index).text()` 获取该列第一行的文本内容(即商品名称),再拼接出对应的图片路径。 4. 最后,将图片路径赋值给 `<img>` 元素的 `src` 属性,从而显示对应图片
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值