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

【问题标题】：how to use multiple evals in html tags with two or more attributes asp.net如何在具有两个或多个属性 asp.net 的 html 标签中使用多个 eval
【发布时间】：2019-02-07 21:33:30
【问题描述】：

我在我的 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'/>

请给我正确的代码格式。

提前致谢

【问题讨论】：

标签： html asp.net sql-server

【解决方案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>

【讨论】：