【问题标题】:Why doesn't the image load when dynamically loading css in asp.net?为什么在asp.net中动态加载css时图片不加载?
【发布时间】:2009-10-19 22:11:06
【问题描述】:

我通过将链接样式属性设置为服务器标记来动态加载 css 文件。

除了图像之外,所有的 css 都可以正常加载。它只显示替代文本。我在 page_load 事件中这样做。

这是我的 img 标记的 sn-p:

<img class="logourl" alt="Header" />

这是 logourl 的 css:

.logourl
{
background-image:url(../images/a-logo.png);
width:169px;
height:61px;
margin-top:5px;
}

当我右键单击图像并查看属性时,它是空白的(大小、地址等)。

【问题讨论】:

    标签: c# asp.net css


    【解决方案1】:
    <img class="logourl" alt="Header" />
    

    &lt;img&gt; 标签可以有背景图片属性吗????这甚至没有意义。

    根据 MSDN,img 对象没有这个属性,所以我认为它在 IE 中不受支持是安全的。

    您确定不想要跨度、超链接或其他一些背景图像有意义的属性吗?

    编辑

    我刚刚阅读了@Justin Grant 的回答。我想您可以在图像标签上使用背景图像,但我保留我的答案,因为这似乎是一种愚蠢的做法。如果您想要的是图像周围的框架,我会创建一个具有设定宽度和高度的 div 或 span,并且在其中创建一个稍小的 img。

    【讨论】:

    • 我尝试过
      ,但没有任何显示。
    • 我动态设置链接的每个 css 文件都有不同的 logourl 类图像。
    【解决方案2】:

    我不会称之为动态加载 CSS 文件。您正在动态设置链接标记中的属性,但 CSS 文件的加载方式与任何其他 CSS 文件相同。浏览器看不出与任何其他链接标签有任何区别,因此动态设置的 url 不是问题的一部分。

    图像和 css 文件位于何处?请记住,url 是相对于 CSS 文件所在的位置,而不是页面所在的位置。

    请注意,即使您为图像设置了背景图像,它仍然会在图像顶部显示替代文本并指示图像未加载。 background-image 属性不设置图像的来源。您应该只使用 div 元素而不是 image 元素。

    【讨论】:

    • 图片在root/images文件夹,css文件在root/css文件夹
    • @Xaisoft:然后它看起来是正确的...再次检查文件名...然后尝试在图像标签中添加 src="" 使其不会损坏,或者尝试使用 div 标签。
    • 我添加了 src="" 现在它实际上显示了协议和图像大小等属性,但它只显示基本根路径(localhost),而不是@987654322 @.
    【解决方案3】:

    要将背景图像放在 IMG 标记上,根据http://www.contentwithstyle.co.uk/content/css-background-image-on-html-image-element,您需要应用 CSS 填充并确保您使用的是 display:block。

    此外,如果这是一个目录路径问题,则图像必须相对于它所引用的 CSS 文件的位置。尝试使用绝对路径来验证这确实是问题所在,然后尝试各种相对路径以查看是否可以解决。

    如果此时仍未解决,我建议尝试 Fiddler (www.fiddlertool.com),它可以让您看到正在发出的 HTTP 请求——特别是浏览器请求的实际 URL。确保在 Fiddler 下重新加载页面之前先清除缓存,这样您就可以确保实际发出请求而不是从缓存中提取。反正会有三种可能的情况:

    1. Fiddler 根本不会显示您请求 URL。这表明您的 CSS 存在一些问题(例如,未正确加载或语法错误)
    2. Fiddler 显示正在请求的图像 URL,但显示 404(未找到)或其他错误。这意味着请求的 URL 错误,或者您的网站从该文件夹中提供的图片存在问题
    3. Fiddler 显示正确的 URL,并从服务器获得 200 状态(成功)。如果发生这种情况,我很难过!

    右键单击只会显示 IMG 标签的 SRC。使用背景 CSS 时,您需要查看源代码。

    【讨论】:

    • 当我查看源代码时,我看到样式表已经加载到头部并且图像是
    • 这是预期行为。如上所述,右键单击仅适用于 SRC 属性,不适用于通过 CSS 设置的背景图像。您需要遵循我上面链接的页面中的建议,或者(甚至更好)考虑使用 DIV 而不是 IMG。
    • 我发布了一个额外的建议(见上文),以使用 Fiddler 来诊断浏览器是否实际请求了图像。这应该可以帮助您诊断正在发生的事情。此外,您可能需要编辑原始问题以包含 HTML 页面的(简化)版本,以便我们可以看到您的 CSS 包含和任何可能影响问题的周围标签。
    猜你喜欢
    • 2011-10-22
    • 2011-11-04
    • 2021-09-26
    • 2020-02-25
    • 2021-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多