为什么我无法在asp.net网站上指定图像的高度和宽度? (包括html输出)

时间:2022-09-03 23:18:07

Whenever I run a speed test on Google or GMetrix, they always give me an F because they say my image sizes aren't specified, so more http requests are required. But on my asp.net (vb) website, the links they specify are linkbuttons and look like this using CssClass:

每当我在Google或GMetrix上进行速度测试时,他们总是给我一个F,因为他们说我没有指定我的图像大小,因此需要更多的http请求。但是在我的asp.net(vb)网站上,他们指定的链接是链接按钮,使用CssClass看起来像这样:

<asp:Image ID="Image9" runat="server" ImageUrl="~/images/flagpt.png" 
CssClass="flagbutton" tooltip="Veja este site em português" 
title="Veja este site em português"/>

This results in this html output (using CssClass) but still doesn't have img dimensions:

这导致这个html输出(使用CssClass)但仍然没有img维度:

<img id="Image9" title="Veja este site em português" 
 class="flagbutton" title="Veja este site em português" 
 src="images/flagpt.png" />

But if I just put height="15" width="26" like this, it still doesn't work:

但是,如果我只是将height =“15”width =“26”这样,它仍然不起作用:

  <asp:Image ID="Image7" runat="server" ImageUrl="~/images/flagde.png" 
  height="15" width="26" tooltip="View this website in Deutsch" 
  title="View this website in Deutsch"/>

This results in this html output, but speed tests don't detect img dimensions:

这导致这个html输出,但速度测试不检测img尺寸:

<img id="Image7" title="View this website in Deutsch" 
   title="View this website in Deutsch" 
   src="images/flagde.png" style="height:15px;width:26px;" />

The speed tests still suggest I'm not specifying my dimensions. Any suggestions to help me with this would be greatly appreciated!

速度测试仍然表明我没有指定我的尺寸。任何建议,以帮助我这将是非常感谢!

1 个解决方案

#1


0  

Firstly, not specifying image dimensions won't result in extra HTTP requests. It might result in the browser having to re-flow your document once the image is downloaded, but that's a different issue.

首先,不指定图像尺寸不会导致额外的HTTP请求。这可能导致浏览器在下载图像后不得不重新流动文档,但这是一个不同的问题。

Secondly, you have specified your image dimensions. It's right there in the output:

其次,您已指定图像尺寸。它就在输出中:

style="height:15px;width:26px;"

Specifying the width and height attributes as well should not be necessary.

同样指定宽度和高度属性也不是必需的。

If you really want to force the output to include the width and height attributes, you'll either need to use a custom control or a control adapter. Something like this should do the trick:

如果您确实要强制输出包含width和height属性,则需要使用自定义控件或控件适配器。像这样的东西应该做的伎俩:

public class ImageDimensionsAdapter : WebControlAdapter
{
   protected override void Render(HtmlTextWriter writer)
   {
      var image = Control as Image;
      if (image != null)
      {
         Unit size = image.Width;
         if (!size.IsEmpty && size.Type == UnitType.Pixel)
         {
            writer.AddAttribute(HtmlTextWriterAttribute.Width, size.Value.ToString("###0"));
         }

         size = image.Height;
         if (!size.IsEmpty && size.Type == UnitType.Pixel)
         {
            writer.AddAttribute(HtmlTextWriterAttribute.Height, size.Value.ToString("###0"));
         }
      }

      base.Render(writer);
   }
}

To apply it, add a .browser file in your App_Browsers directory containing the following:

要应用它,请在App_Browsers目录中添加一个.browser文件,其中包含以下内容:

<browsers>
   <browser refID="Default">
      <controlAdapters>
         <adapter
            controlType="System.Web.UI.WebControls.Image"
            adapterType="ImageDimensionsAdapter"
         />
      </controlAdapters>
   </browser>
</browsers>

#1


0  

Firstly, not specifying image dimensions won't result in extra HTTP requests. It might result in the browser having to re-flow your document once the image is downloaded, but that's a different issue.

首先,不指定图像尺寸不会导致额外的HTTP请求。这可能导致浏览器在下载图像后不得不重新流动文档,但这是一个不同的问题。

Secondly, you have specified your image dimensions. It's right there in the output:

其次,您已指定图像尺寸。它就在输出中:

style="height:15px;width:26px;"

Specifying the width and height attributes as well should not be necessary.

同样指定宽度和高度属性也不是必需的。

If you really want to force the output to include the width and height attributes, you'll either need to use a custom control or a control adapter. Something like this should do the trick:

如果您确实要强制输出包含width和height属性,则需要使用自定义控件或控件适配器。像这样的东西应该做的伎俩:

public class ImageDimensionsAdapter : WebControlAdapter
{
   protected override void Render(HtmlTextWriter writer)
   {
      var image = Control as Image;
      if (image != null)
      {
         Unit size = image.Width;
         if (!size.IsEmpty && size.Type == UnitType.Pixel)
         {
            writer.AddAttribute(HtmlTextWriterAttribute.Width, size.Value.ToString("###0"));
         }

         size = image.Height;
         if (!size.IsEmpty && size.Type == UnitType.Pixel)
         {
            writer.AddAttribute(HtmlTextWriterAttribute.Height, size.Value.ToString("###0"));
         }
      }

      base.Render(writer);
   }
}

To apply it, add a .browser file in your App_Browsers directory containing the following:

要应用它,请在App_Browsers目录中添加一个.browser文件,其中包含以下内容:

<browsers>
   <browser refID="Default">
      <controlAdapters>
         <adapter
            controlType="System.Web.UI.WebControls.Image"
            adapterType="ImageDimensionsAdapter"
         />
      </controlAdapters>
   </browser>
</browsers>