如何在HTML页面中插入图片？

Question

如何在HTML页面中插入图片？

htmlimageembedded-resource

3

请不要马上打我！

我知道如何在HTML页面中添加图片......但是我想将实际的图像文件添加到此HTML页面中。

就是这样，我希望我的HTML页面是独立的，没有任何文件夹或文件与它相关。例如，我将CSS放在<style>标签中。现在，我想用一张图片做同样的事情。

第一个问题：这可能吗？

第二个问题：导入的图像文件可以在HTML中添加多次吗？

我不知道我是否清楚地表达了自己，所以这里有一个我想要的示例：

<html>
    <head>
        <file byte="A02AB46213F541F...ABCD542" ref="my_ref" />
    </head>
    <body>
        <img src="my_ref" />
    </body>
</html>

- Marc

3

这个链接告诉你如何操作：http://sveinbjorn.org/news/2005-11-28-02-39-23/Embedded-image-data-in-HTML-documents.html - edtheprogrammerguy

非常感谢！你回答了我的第一个问题。现在如果我可以使用嵌入式资源来引用它就太好了，因为我将需要在我的HTML页面中使用这个图像一千次（第二个问题）。 - Marc

对于第二个问题，不，我认为使用数据URL是不可能的。 - Alex Paven

使用img标签.. <img src="pic_trulli.jpg" alt="意大利特鲁利"> 参考自https://www.w3schools.com/html/html_images.asp - Khalda Nawaf

2个回答

1

你也可以把数据放在img标签的src属性中。

<IMG  src="data:image/png;base64,iVBORw0KGg....ggg==">

- Terrik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc · Accepted Answer

我终于找到了！

感谢......实际上是Stackoverflow ^^

我找到的解决方案非常简单。只需在CSS中使用Data Url！现在我的HTML代码确实难以阅读，但是HTML文件非常简单！

编辑：我认为一个小例子对其他人来说非常有用：

<html>
    <head>
        <style>
            .myImage
            {
                background-image: url("data:image/png;base64,iVBORw0KG...ggg==");
                background-repeat: no-repeat;
                background-position: center;
            }
        </style>
    </head>
    <body>
        <div class="myImage">
        </div>
    </body>
</html>