如何在单个 HTML / PHP 文件中嵌入图像?

2024-04-09

我正在创建一个轻量级的单文件数据库管理工具,我想将一些小图标与它捆绑在一起。在 HTML/PHP 文件中嵌入图像的最佳方法是什么?

我知道一种使用 PHP 的方法,我可以使用 GET 参数调用同一个文件,该参数将输出具有正确标头的硬编码二进制数据,但这似乎有点复杂。

我可以使用一些东西直接在 CSS 中传递图像吗background-image宣言?这将使我能够利用 CSS sprite 技术。

浏览器支持在这里不是问题,因此也欢迎更多奇特的方法。

EDIT

有人有如何使用 PHP 正确生成数据 URL 的链接/示例吗?我想echo 'data:image/png;base64,'.base64_encode(file_get_contents('image.png'))就足够了,但我可能是错的。


将图像直接嵌入 HTML 页面的解决方案是使用数据 URI 方案 http://en.wikipedia.org/wiki/Data_URI_scheme

例如,您可以使用如下所示的 HTML 的某些部分:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

我链接到的维基百科页面上还有其他解决方案:

  • 将图像包含为 CSS 规则
  • 使用一些 JavaScript。

但请注意,这些解决方案并不适用于所有浏览器 - 由您根据您的具体情况决定这是否可以接受。


Edit :回答你提出的问题“如何使用 PHP 正确生成数据 URL”,看看维基百科页面下面关于数据 URI 方案 http://en.wikipedia.org/wiki/Data_URI_scheme#Inclusion_in_HTML_or_CSS_using_PHP,这给出了这部分代码(引用) :

function data_uri($file, $mime) 
{  
  $contents = file_get_contents($file);
  $base64   = base64_encode($contents); 
  return ('data:' . $mime . ';base64,' . $base64);
}
?>

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="An elephant" />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在单个 HTML / PHP 文件中嵌入图像? 的相关文章

  • 数组中的唯一条目

    我有以下内容将前 10 个 URL 存储到会话中 function curPageURL pageURL http if SERVER HTTPS on pageURL s pageURL if SERVER SERVER PORT 80
  • 已弃用的代码: vs style="font-weight:bold;"

    我一直用 b 标记为粗体 因为这是我很久以前就被教做的方式 但现在我的 IDE 总是告诉我 b 已弃用并使用 css 样式 假设他们希望我使用 div style font weight bold Bold Text div 我的 IDE
  • 从中间部分匹配完成建议elasticsearch

    我有一个名为搜索建议具有以下 search suggest type completion analyzer simple payloads true preserve separators false preserve position
  • SQL 查询:按 ntext 字段分组

    我有以下查询 它基本上检索销量最高的 5 本书 select top 5 count id book orddetails books sold bk from orderdetails orddetails ord inner join
  • Flask 无法播放 html 中的视频

    我有一个 Flask 应用程序 应该在加载页面时播放视频 但它只显示在左上角 并且不会从视频的第一帧开始改变 我已经尝试将其插入 html 代码但它不起作用 extends base html block content
  • Fabric JS html 5 图像弯曲选项

    我想用html5工具制作图像曲线 我使用 Fabric js 作为 html5 画布工具 请指导我如何在杯子 玻璃 圆柱形或圆形产品等图像上制作弯曲图像 参考号图片如下 http vsdemo cwwws com Images Produc
  • Facebook 页面插件无法运行 - 仅适用于一个网站

    我已将页面插件集成到我的目录中 ruhrlink de info php schluessel 150991 不起作用 其他的可以 当我在开发者网站 gt 页面插件中手动输入网址时 它在那里也不起作用 https www facebook
  • 推进并离开加入

    在教义中我可以 q Doctrine Query create gt from One o gt where t text aaa gt andWhere h text bbb gt leftJoin o Two t gt leftJoin
  • 如何使用 c 使用 libpng 更改 png 图像的 RGB 值?

    更改 png 图像的 rgb 值的推荐方法是什么 现在我正在使用示例代码来查看 libpng 的工作方式 它只打开一个 png 图像并写入另一个 png 图像 但是我想更改这个新图像的 RGB 值 使其变为全蓝色 绿色或红色 无论我选择什么
  • MySQL 错误:无法创建表(errno:121“写入或更新时重复键”)

    我使用 MySQL Workbench 生成数据库的图表和代码 当我将代码放入 phpMyAdmin 时 它显示错误 1005 无法创建表wypozyczalnia wypozyczenie 错误号 121 写入或更新时密钥重复 哪里有问题
  • PHP mysql 土耳其语字符编码及比较

    我正在尝试通过 AJAX POST 从 MySql 数据库中过滤土耳其语姓名 英文字母单词列出一切正常 但是如果我发送 这是带点的字母 O 结果不仅是 还包括 O 和 另外我注意到 AJAX 帖子被发送 作为 C3 96 有人可以帮忙吗 请
  • 最近的 Facebook API 的 FQLQuery

    我下载了最新的 Facebook PHP SDK 当我想要获取有关帖子的信息 例如点赞数 评论数和分享数 时 我的查询可以正常工作 但是 当我想获取用户的好友数量时 它不起作用并告诉我 Facebook FacebookAuthorizat
  • bash 调整图像尺寸以适合特定大小

    我到处搜索但找不到这个问题的答案 我想精确输出一个文件夹中的所有图像 大小为 50Kb 并保持原始的宽高比 I tried ImageMagick并将大小调整为 250x250 例如 但它对我不起作用 它所做的是更改第一个尺寸并适应另一个尺
  • 仅使用 url 嵌入视频

    给定一个 youtube url 我如何使用 net c 将视频嵌入到页面中 只需添加如下一行 将 autoplay 设置为 0 或 1 取决于您是否希望人们真正留在您的页面上
  • 未捕获的异常:无法找到 Mix 文件

    我正在尝试在本地系统中运行 laravel 应用程序 我已遵循https gist github com hootlex da59b91c628a6688ceb1 https gist github com hootlex da59b91c
  • 在单个测试中断言多个条件,还是分成多个测试? [复制]

    这个问题在这里已经有答案了 如果您正在测试如下所示的计数函数 那么在一个函数中测试该函数的多项内容与为每个测试使用一个测试函数相比 是否被认为是 正确 或 错误 function testGetKeywordCount tester thi
  • Jquery UI:日期选择器。如何通过 $_GET 在日期选择器中设置日期

    我找不到如何设置 GET 变量来手动设置日期选择器中的日期 http jqueryui com demos datepicker http jqueryui com demos datepicker 例子 那可能吗 Thanks 在此使用
  • 如何使用ajax从服务器接收返回的数据?

    基本上我有一个带有用户名文本框和提交按钮的表单 现在我想要的是 当用户在文本框中输入文本时 它应该获取文本框值并将用户名发送到服务器 以便服务器可以检查该用户名是否被任何其他用户占用 我可以将文本值发送到服务器 但我不知道如何接收回一些数据
  • 在 Woocommerce 中以编程方式创建新产品属性

    如何通过插件为 WooCommerce 创建属性 我只找到 wp set object terms object id terms taxonomy append From 这个堆栈问题 https stackoverflow com qu
  • 如何从 Backbone 集合中提取多个属性?

    我试图从 Backbone 集合中提取多个属性 但它返回undefined 收藏 id 1 name raju age 23 sex male hobbies id 2 name ramesh age 43 sex male hobbies

随机推荐