Question

我使用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'/>

请给我正确的代码形式。

感谢前进

Answer 1

第一，<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>

如何在具有两个或多个属性的html标记中使用多个eval asp.net

1 个答案: