我在homepage.aspx文件中使用此代码从数据库中绘制img标记的来源:
<asp:Image ID="Image4" runat="server" src='<%#Eval("coverBig")%>'>
并且它工作得很好但是现在我想使用使用两个或更多图像地址的srcset
html标签,默认表单如下所示:
<asp:Image ID="Image1" runat="server" srcset="images/1.png 1000w, images/2.png 660w, images/3.png 296w"/>
我想使用eval从数据库获取img源代码,这是我尝试但似乎没有工作的代码:
<asp:Image ID="Image4" runat="server" srcset='<%#Eval("coverBig")%> 130w,<%#Eval("coverSmall")%> 90w'/>
请给我正确的代码表格。
提前致谢
首先,<asp:Image>
有一个有效的属性ImageUrl
而不是src
。
其次,src
和srcset
分别是<img>
和<picture>
标签的属性,不是asp.net元素。
下面的代码显示了srcset
的工作原理 -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="https://images.pexels.com/photos/531739/pexels-photo-531739.jpeg?auto=compress&cs=tinysrgb&h=350">
<source media="(min-width: 465px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjAWwspwgOqrtvbqz-THLRhmQ4TxBVg_9ZpqwZFb0NWJCjpqqA">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512__340.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>
<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>
<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>
</body>
</html>