图片src属性问题答案

【问题标题】：image src attribut issue图片src属性问题
【发布时间】：2013-03-28 03:48:53
【问题描述】：

我将图像存储在 localhost 的 asp.net 网站的文件夹中。

图像在那里，并且 src 属性格式正确，但图像未显示在 img 元素中。

有人可以告诉我可能是什么问题或遗漏.. 当我检查浏览器 url 中的图像时，它会正确显示

     localhost:xxxx/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg

这是我对元素的标记

<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="localhost:59657/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="">

【问题讨论】：

查看开发工具中的网络标签
你的代码是什么样的？
尝试在src中使用.JPEG
如果您采用路径并在浏览器中查找它会怎样？然后显示图像吗？
是的，我在问题中提到了..它确实显示..

标签： asp.net html css image

【解决方案1】：

您的链接缺少协议中的两个正斜杠？

<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="localhost//:59657/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />

还有用于结束图像标签的斜线

【讨论】：

由于某种原因代码没有显示，所以我将它添加到下面
img 标记已由 asp.net 的元素生成。我不确定您指定的 localhost 地址

【解决方案2】：

尝试使用前缀。 Http还是Https

http://localhost:xxxx/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg

<img src="http :// domain:port/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.jpeg" />

【讨论】：

图像元素是由元素生成的，所以我不确定为什么生成格式错误..
如果您不向 src 写入前缀。浏览器会看起来yourdomain/path/domain:port/TenModified/setX/… 浏览器认为。它是我网站下的一个目录。
如果图片和您的网站在同一个域中，您可以使用@lucuma 回答来解决您的问题。

【解决方案3】：

您不需要包含域和端口。以下将适用于 src： /ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg

或完整的标签：

<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />

【讨论】：

http:// 和 /profileTenModified/ 都有效.. 对此有何解释.. 我只是好奇..
浏览器不需要域和端口来引用项目中的资产。实际上，如果您是硬编码（我希望不是），则需要在投入生产时对其进行更改以使用生产 URL。除非您将资产放在外部 CDN 上，否则在没有域和端口的情况下使用这些相对路径要容易得多。此外，如果您使用 SSL，则无需进行任何更改。

【解决方案4】：

使用这个：

src="ProfileTenModified/setP..."

完整代码：

<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />

【讨论】：

【解决方案5】：

您应该从路径中删除“localhost:59657”。你真的不需要它，只是相对于root。当您启动没有“localhost:59657”并且只是相对于 root 的应用程序时，这将为您节省大量时间。您无需更改所有路径。任何锚点都是如此。也使这些根相对。

<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg">

【讨论】：