如何将我计算机上的图像添加到 css 或 html 中的站点？

Posted 2023-03-05

【中文标题】如何将我计算机上的图像添加到 css 或 html 中的站点？

【英文标题】：How to add image that is on my computer to a site in css or html?

【发布时间】：2014-05-11 15:17:37

【问题描述】：

我有一张我在电脑上用 photoshop 制作的图像，我想知道是否有一种方法可以使用 CSS 或 html 将图像添加到我的网站，而无需在网站上制作图像。谢谢。

【问题讨论】：

只能在您的计算机上查看，还是向所有访问该网站的人查看？

您需要将图像添加到可公开访问的空间

什么像照片桶类型的东西？

不，像一个互联网的东西。

【参考方案1】：

不，如果您的网站位于远程服务器上，即不在本地主机上，则不会。

【参考方案2】：

图片需要与你的html页面在同一个文件夹中，然后创建一个指向该文件夹的href，并在末尾添加图片名称。示例：

<img src="C:\users\home\pictures\picture.png"/>

【讨论】：

如果 HTML 和图像在同一个文件夹中，那么他的站点不会是远程的，他不需要使用完整路径。

【参考方案3】：

如果您只想在本地浏览器上查看图像，则可以在本地运行服务器时完成。您只需要通过 http（不是 file://）引用本地服务器，例如：

http://localhost/my_picture.jpg

如果图片.jpg 位于本地服务器的 webroot 文件夹中。如果您打开浏览器的开发人员工具并将img 元素的src 属性更改为图像的本地服务器URL，则可以对任何站点执行此操作。如果您有权访问您网站的 HTML，请在此处进行更改。但显然，如果不在您本地计算机/服务器上的人访问该站点，他们将获得损坏的图像，除非他们碰巧也在运行本地服务器并且拥有具有相同文件名的图像，这很奇怪。

【参考方案4】：

将图像上传到您的服务器或图像托管站点中，您可以在其中获得图像链接，然后在您获得该图像的网站页面上添加行

<img src="paste here your image full path"/>

【参考方案5】：

这符合我的目的。非常基本和简单，但它满足了我的需求（将我的个人照片上传到互联网上，以便我可以使用它的 URL）。

转到photos.google.com 并打开您希望嵌入网站的任何图片。

点击分享图标，然后选择“获取链接”以生成该图片的可分享链接。

转到j.mp/EmbedGooglePhotos，粘贴该链接，它会立即生成该图片的嵌入代码。

打开您的网站模板，粘贴生成的代码并保存。该图片现在将直接从您的 Google 照片帐户投放。

如果您遇到问题，请查看此video tutorial。

【参考方案6】：

如果您只是想查看您的图片在网站上的显示效果而不将其上传到服务器或不在本地服务器上运行您的网站， 我认为一个非常简单的解决方案是将您的图片转换为 Base64 并将内容添加到 IMG 标记或作为带有 CSS 的背景图像。