在图片的src标签中使用URL中的Base64字符串 [英] Use Base64 String from URL in src tag of image

问题描述

我有一个返回图像的base64版本的服务.现在我想在img的src标记中使用base64字符串.该服务在http://localhost:8080/file/301/base64下提供base64版本.

base64字符串如下所示:

data:image/gif;base64,iVBORw0KGgo ...

我在页面上的img标签当前如下所示:

<img alt="" src="http://localhost:8080/file/301/base64" style="height:836px; width:592px">

有什么办法可以使它运行?

解决方案

它不起作用，因为您正在对待带有数据URL字符串的页面，就好像这是另一种外部可链接图像资产一样.不幸的是，链接到外部资产仅适用于图像文件，但是数据URL是外部链接的替代选择，因此不能以相同的方式起作用.

简而言之，要使用数据URL字符串显示图像，您需要将实际的数据URL字符串作为src=值，例如:

<img alt="" src="data:image/gif;base64,iVBORw0KGgo ...  " style="height:836px; width:592px">

示例

来自Masinter，1998年的HTML示例 RFC 2397-数据" URL方案:

 <IMG SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" ALT="Larry"> 

I have an service which returns the base64 version of an image. Now i want to use the base64 string in the src tag of an img. The service offers the base64 version under http://localhost:8080/file/301/base64.

The base64 string looks like this:

data:image/gif;base64,iVBORw0KGgo ...

My img tag on the page currently looks like this:

<img alt="" src="http://localhost:8080/file/301/base64" style="height:836px; width:592px">

Is there any way to get this running?

解决方案

It is not working because you are treating a page featuring a Data URL string, as if were just another type of external link-able image asset. Unfortunately linking to an external asset works for image files, but Data URLs are meant as an alternative to an external link, and thus does not work in the same way.

In short, to display an image making use of a data URL string, you need put the actual data URL string as the src= value, in your case for example:

<img alt="" src="data:image/gif;base64,iVBORw0KGgo ...  " style="height:836px; width:592px">

Examples

Example HTML from Masinter, 1998 RFC 2397 - The "data" URL scheme:

<IMG SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" ALT="Larry">

这篇关于在图片的src标签中使用URL中的Base64字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！