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

Question

这是我的 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 文本应该得到显示

Answer 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 才会被调用，从而显示图片并隐藏替代文本。