标签显示不出图片——图片路径问题

2023-11-09

引言:

	大家在进行开发的过程中,经常会有显示图片这个需求,但是却经常因为种种问题显示不了,接下来,我将详细叙述这个问题,希望对大家有所帮助。

图片显示不出,一般有三个问题:

一.图片所在路径错误

1.使用绝对路径
解决方法:
右键查看图片的详细属性,对比文件所在路径与书写的url,再进行修改即可。


2.使用相对路径
①要显示的图片和文件在同一目录下
在这里插入图片描述
源码:

<body>
	<img src="timg.jpeg" >
</body>



②图片在html文件的下一级
在这里插入图片描述
源码:

<body>
	<img src="img/timg.jpeg" >
</body>



③图片在html文件的上一级
在这里插入图片描述
源码:

<body>
	<img src="../timg.jpeg" >
</body>
  • ./或者省略不写,表示图片在当前路径下,即第一种情况
  • . ./ 表示文件的上一级目录,即第三种情况
  • /表示当前路径的下一级,即第二种情况

其他的种种路径无非是这几种的组合,只需参照这三个例子修改路径即可


二.图片后缀名错误

系统自动隐藏了图片后缀名,本来是.png格式,却写成了.jpg或.jpeg

解决方法:

右键查看图片的详细属性,观察图片的后缀名,再进行修改即可。



三.浏览器不支持

部分浏览器对有些路径书写方式不支持。

例子:
 图片和文件的相对路径:
在这里插入图片描述
源码:

<body>
	<img src="../timg.jpeg" >
</body>

结果:
safari:
在这里插入图片描述

firefox:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

标签显示不出图片——图片路径问题 的相关文章

随机推荐

  • win11任务栏图标大小设置教程

    最近有不少小伙伴在升级安装最新的Win11系统后 发现任务栏的图标太小 不知道win11任务栏图标怎么调大小 下面小编就来给大家详细介绍下win11任务栏图标大小设置的具体方法吧 希望对大家有所帮助 win11任务栏图标大小设置教程 1 w
  • 错误:Visual Studio has encountered a problem and needs to close

    我使用VS2008 Qt4 7 4开发时 安装Qt后报出该错误 google了一下解决了问题 原来在安装QT插件不正确导致的 在360软件管家中 卸载了qt win opensource 4 7 4 vs2008 但qt vs addin
  • Android 9 静默安装、卸载App

    文章目录 引言 安装流程 实现代码 AndroidManifest xml配置 apk运行打包 放到源码目录下重新进行签名 编译 安装日志 转载自 Android 9 P静默安装 卸载App适配终极指南 引言 静默安装是指apk安装不需要用
  • Scratch图形化编程等级考试简介

    目录 全国青少年软件编程等级考试是行业首个且规模最大的编程等级考试 并且还有权威认证 对孩子未来的升学也有非常大的益处 全国青少年软件编程等级考试是由中国电子学会发起的面向青少年机器人软件编程能力水平的社会化评价项目 中国电子学会是工业和信
  • springboot 获得请求ip地址

    package com example winterholity util import javax servlet http HttpServletRequest import java net InetAddress import ja
  • Yii Framework 开发教程(41) Zii组件-Tabs示例

    CJuiTabs 显示分页UI组件 和Yii Framework 开发教程 17 UI 组件 TabView示例功能类似 它封装了 JUI tabs插件 前基本用法如下 php view plain copy print
  • (一):Qt信号槽原理---元对象与moc

    一 信号槽 当信号被调用时 与其关联的槽函数会被调用 调用时机与连接类型有关 同一个线程内的信号 槽 就相当于函数调用 和观察者模式相似 只不过信号 槽稍微有些性能损耗 这个后面细说 跨线程的信号 槽 在信号触发时 发送者线程将槽函数的调用
  • Visual Assist X AND MSDN

    assist X 推荐 这款插件是visual studio或者vc的插件 没想到vs用起来也可以这么爽 用起来居然比sourceinsight还好用 好用到哭 好用到哭 好用到哭 自动补全 补全的时候还可以看到对这个补全的东西的介绍 鼠标
  • 论文笔记:GRLSTM: Trajectory Similarity Computation with Graph-Based Residual LSTM 2023 AAAI

    1 intro 1 1 背景 轨迹相似度 早期的度量采用成对匹配并依赖动态规划来计算最优对齐 DTW LCSS EDR 时间复杂度为 n是轨迹的平均长度 gt 对于大规模的轨迹数据并不是理想的选择 gt 会受到噪点的干扰 导致最终准确度下降
  • 微信小程序-在console中输出data中的数据

    getCurrentPages 1 data
  • 将Vue工程打包为Electron:vue-cli-plugin-electron-builder

    介绍 vue cli plugin electron builder 插件的作用是将一个Vue工程打包为Electron程序 官网 https nklayman github io vue cli plugin electron build
  • 动态规划---01背包问题

    问题背景 有N件物品和 个最多能背重量为W 的背包 第i件物品的重量是weight i 价值是value i 每件物品只能 次 求解将哪些物品装 背包 所得物品价值总和最 二维dp分析 1 确定dp dp table 数组及其下标的含义 d
  • 编译时The method is undefined for the type 报错

    问题描述 项目使用 1 jdk1 8 2 maven管理引入很多第三方jar包依赖其中xml apis jar文件中自带了2002年的org w3c dom的jar文件 该jar文件中的Node接口没有getTextContent 使用 o
  • redhat 文件服务器,几个重要的RedHat Linux内核文件详细介绍

    在网络中 不少服务器采用的是Linux系统 为了进一步提高服务器的性能 可能需要根据特定的硬件及需求重新编译Linux内核 编译Linux内核 需要根据规定的步骤进行 编译内核过程中涉及到几个重要的文件 比如对于RedHat Linux 在
  • Handler与异步消息处理

    Handler 在 Android 中的应用很广泛 基本上每个 android 开发人员都会使用到它 本篇文章将会介绍 Handler 和异步消息机制相关的使用方法 下一篇会从源码的角度分析 Android 中异步消息处理的流程 Andro
  • javascript/nodejs 中获取当前时间

    javascript nodejs 中获取当前时间 昨天 今天 明天 我们在开发中 经常要获取的今天 昨天 和明天的日期 下列有个记录能够获得今天 昨天 明天的日期 并且格式化输出 首先我们需要扩展Date对象的Format函数 1 2 3
  • LTE上行RS的SINR

    每个UE的上行SRS都放置在一个子帧的最后一个块中 SRS的频域间隔为两个等效子载波 所以一个UE的SRS的干扰只来自于其他UE的SRS SINR SRS接收功率 干扰功率 噪声功率 SRS接收功率 SRS发射功率 链路损耗 干扰功率 邻小
  • LeetCode 942. 增减字符串匹配

    由范围 0 n 内所有整数组成的 n 1 个整数的排列序列可以表示为长度为 n 的字符串 s 其中 如果 perm i lt perm i 1 那么 s i I 如果 perm i gt perm i 1 那么 s i D 给定一个字符串
  • 面试官:为什么data属性是一个函数而不是一个对象?

    一 实例和组件定义data的区别 vue实例的时候定义data属性既可以是一个对象 也可以是一个函数 const app new Vue el app 对象格式 data foo foo 函数格式 data return foo foo 组
  • 标签显示不出图片——图片路径问题

    引言 大家在进行开发的过程中 经常会有显示图片这个需求 但是却经常因为种种问题显示不了 接下来 我将详细叙述这个问题 希望对大家有所帮助 图片显示不出 一般有三个问题 一 图片所在路径错误 1 使用绝对路径 解决方法 右键查看图片的详细属性