Div 背景图像未显示然后显示图像替代文本

Posted 2023-03-06

【中文标题】Div 背景图像未显示然后显示图像替代文本

【英文标题】：Div background image not showing then display image alt text

【发布时间】：2017-03-22 13:57:55

【问题描述】：

这是我的 html 代码，其中我有一个 div，并且在 div 之外有一个图像

<div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;">                    
<asp:Image  ID="ProductThumbnail1" runat="server" Style="max-height: 50px;position:absolute;right:0px;top:0px;" />
</div>
<asp:Image  ID="Imagealt" runat="server" />

我正在做的是将服务器端的 div 背景图像设置为代码

ProductThumbnail.Style.Add("BACKGROUND-IMAGE", "url(" + Item.ThumbnailUrl.Replace("~", "..") + ")");

我想要的是，如果 div 背景图像 url 没有显示任何图像，那么 Imagealt 将显示我从后端设置的 alt 文本，如果 div 背景图像 url 在这种情况下显示图像 Imagealt隐藏起来

我希望所有这些都在服务器端代码和 javascript 上完成

请查看下图

**在左侧 div 图像不存在，因此图像替代文本显示是正确的，但在右侧图像显示仍然向下替代文本出现，这是错误的

如果显示 div 背景图像，我不想显示替代文本**

1-如果图片没有替代文字

2-如果图片未显示，则显示替代文字

例如：

如果我的div背景图片url路径设置为这个url

http://meenaprints.in/Admin/images/productimg/thumbnail/436x636_4736.jpg

不应出现替代文本，因为此 URL 正在检索图像

但是

如果div背景图片URL路径设置为URL

http://meenaprints.in/Admin/images/productimg/thumbnail/436x636_473123.jpg

不是检索图像而不是 ALT 文本应该得到显示

【问题讨论】：

图像没有显示...你能检查一下 div 背景看它指向的位置吗（我认为传递了错误的路径）

编写的代码是正确的，我只需要找到如果没有 dic 背景图像，它会显示 alt 文本的代码

所以代码是正确的......你没有任何问题......好:)

我需要为 div 何时显示图像图像替代文本不显示进行编码，如果 div 图像背景图像 url 错误，但明显的图像不会显示，在这种情况下，我需要图像替代文本获取展示

@Hackerman 请查看更新后的问题。希望你能得到我需要的东西

【参考方案1】：

为什么不检查产品图片是否存在并显示/隐藏适当的图片。

if (File.Exists(Server.MapPath("product.jpg")))

    ProductThumbnail1.Visible = true;
    Imagealt.Visible = false;

else

    ProductThumbnail1.Visible = false;
    Imagealt.Visible = true;

更新

那么也许你正在寻找这样的东西？

<div id="imageContainer">
    <div id="altText">Alt text of image</div>
    <div id="imagePlaceHolder" style="display: none;">
        <img src="/test.png" onload="imageIsLoaded()" />
    </div>
</div>

<script type="text/javascript">
    function imageIsLoaded() 
        document.getElementById("altText").style.display = "none";
        //show the image
        document.getElementById("imagePlaceHolder").style.display = "block";
        //or set the image as background
        document.getElementById("imageContainer").style.background = "center center  no-repeat url('test.png')";
    
</script>

只有当图片被加载时，imageIsLoaded 才会被调用，从而显示图片并隐藏替代文本。

【讨论】：

但是如果 GOOgle URL 出现在这种情况下，我们如何搜索这个 url 有图像并且该图像在 div 背景中加载或未加载？

请查看更新后的问题，我希望你能得到我想要的东西