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" />

正常显示

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

  1. php中在网页中显示图片代码,用PHP将网页上的Canvas图像保存到服务器上的方法

    在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意 ...

  2. 图片从服务器在网页显示,Flash让服务器中图片在网页中显示的操作方法

    亲们想知道Flash让服务器中图片在网页中显示的操作吗?下面就是小编整理的Flash让服务器中图片在网页中显示的操作方法,赶紧来看看吧,希望能帮助到大家哦! Flash让服务器中图片在网页中显示的操作 ...

  3. 浏览器打开服务器上的图片无法显示,网页中的图片打不开怎么办?原因与解决办法...

    最近有网友问小编这样一个很泛的问题:网页中的图片打不开怎么办?对于这个问题,其实导致的原因有很多,但也很好排除原因,主要从网络,网页,平台等当面综合去分析,就很容易可以找到答案.以下是小编对网页中的图 ...

  4. 360中不显示html中图片不显示,360安全浏览器浏览网页不显示图片怎么办?解决方法...

    使用360安全浏览器浏览网页时,我们遇到了无法在网页上显示图片的问题.这时候我们该怎么办?我们可以转到360安全浏览器的网页设置来查看是否未显示图片,或者使用360安全浏览器维修医生来修复浏览器,让我 ...

  5. 网易服务器图片不显示图片,为什么网易的网页中部分图片不能正常显示?

    为什么网易的网页中部分图片不能正常显示? 来源:互联网  宽屏版  评论 2010-07-22 11:29:19 分类: 电脑/网络 >> 互联网 问题描述: 参考答案: 开始--> ...

  6. 360中不显示html中图片不显示图片,360浏览器网页不显示图片?如何显示出来

    有很多用户在使用360浏览器的时候碰到了无法显示图片的问题,那么要如何解决这个问题呢,今天就让我们一起来看看,如何使用浏览器正确的打开浏览器使用,帮助用户找出无法显示图片的原因和解决的办法,今天小编就 ...

  7. html给网页加图片背景颜色,0035 如何设置网页背景图和在网页中插入图片

    上节课讲了关于表格的一些更多知识和用表格配合div来进行网页排版. 这节课开始讲关于网页图片的相关知识. 上节课的课后练习 1.去网上搜索2个自己喜欢的图片,1个图片用来作为整个网页的背景,另一个图片 ...

  8. 如何在网页中加入图片

    网页是一个文本文件,但是没办法加入音频或者视频,需要把外部图片引入网页中 图片标签用于向当前页面中引入一个外部的图片. 使用img标签来引入外部图片,img标签是一个自结束标签 src属性指定的是外部 ...

  9. hexo上传网页无法显示图片的有效解决方法

    本文是hexo+github快速搭建html5一文的一部分:https://alvincr.com/2021/01/hexo-with-github_pages/#i-4 个人博客:alvincr.c ...

  10. ReportViewer报表模版中显示图片

    在做项目中.我们可能会经常遇到需要在报表中显示图片的需求.如果说这个图片是个固定的,只是作为一个报表的标题或者logo之类的.那么就很简单,可是对于那些保存在数据库中或者通过程序生成的一个内存中的图片 ...

最新文章

  1. 编程语言性能实测,Go比Python更胜一筹?
  2. 智能工业监管控制系统 ——以遵化海祥机械项目为例
  3. 经典C语言程序100例之二一
  4. c# 再次尝试 连接失败_和平精英ios充值失败该怎么办
  5. linux进程看门狗使用方式,Linux系统中基于看门狗的精细化进程监控方法及系统的制作方法...
  6. JavaScript中的回调地狱及解决方法
  7. 薅羊毛 Colab使用外部数据的7种方法!
  8. Java面向对象和面向过程有什么区别?网友:傻傻分不清楚……
  9. java join 源码_java并发:join源码分析
  10. SSM框架笔记07:初探Spring——采用XML配置文件与注解方式
  11. Netty之四种常用 IO 模型
  12. 【bzoj3122】 Sdoi2013—随机数生成器
  13. Java并发(四)——synchronized、volatile
  14. c#制作的简单的画图板
  15. Verilog 时钟分频
  16. MRI影像学习笔记(一)
  17. 分词工具与方法:jieba、spaCy等
  18. 图像处理里面调色板(Palette)是什么意思?
  19. 数字电视图像相关的基本概念
  20. 从重大漏洞应急看云原生架构下的安全建设与安全运营(下)

热门文章

  1. jp.ne.so_net.ga2.no_ji.jcom.JComException: createInstance() failed HRESULT=0x800401F3L
  2. vt功能对计算机有影响吗,电脑开vt有什么坏处
  3. 台式计算机垃圾清理程序,PC Cleaning Utility(电脑垃圾清理软件)
  4. Win10 如何修改C:\Users\下的用户名
  5. Python机器学习之Logistic回归
  6. 不花钱也能使用迅雷的高速通…
  7. vsd格式文件用什么打开? .vsd
  8. ceph rbd mysql_ceph rbd操作
  9. pb+api实际应用
  10. 当前安全设置不允许下载该文件的原因以及图文解决办法