图像在 VS 设计模式下显示，但在浏览器中不显示答案

【问题标题】：Image showing up in VS design mode, but not in browser图像在 VS 设计模式下显示，但在浏览器中不显示
【发布时间】：2017-01-24 03:05:13
【问题描述】：

好的，我有一个简单的 HTML 输入片段：

<input id="txtFirstName" type="text" class="txtBox" runat="server" />

与此 CSS 属性相关联：

.txtBox
{

    background: url("/Images/lu/input_bg.png") repeat-x scroll left bottom transparent;
    border: 1px solid #E0E6EF;
    padding: 3px;
    width: 275px;

}

图像显示在 Visual Studios 设计窗口中，但当我在浏览器中查看时却没有。什么给了？

【问题讨论】：

您确定部署的站点位于您的 Web 服务器的根目录中吗？可能是您在本地将其部署到根目录，例如localhost:8012/Images 但在远程站点上可能是 your_url/your_site/images。这是一个潜在的原因，因为您需要使用相对 url 或 /your_site/images/lu/input_bg.png。
@dash 我能够通过您的建议解决问题。您应该将您的评论放入答案中，以便我接受。
很高兴为您提供帮助。有关如何使用 Visual Studio 中的内置 Web 服务器在本地镜像远程设置的一些建议，请参阅我的回答。也没有什么可以阻止您在本地托管 IIS（如果允许您在本地计算机上运行 IIS！）

标签： asp.net html css

【解决方案1】：

通常，当您在本地开发时，Visual Studio 会将站点托管在 http://localhost:port - 这是将内置 Web 服务器用于 Web 应用程序和网站项目时的默认设置。

当您部署到远程站点时，它可能位于不是根站点的虚拟目录中；因此，事实上，您的远程应用程序 URL 将类似于 http://yourdomain.ext/your_site/，它会更改图像的路径。解决方案是在路径中包含虚拟目录名称 (/your_site/images/image.jpg) 或使用相对路径。

我更喜欢前者，因为它使所有路径保持一致，并且可以在 Visual Studio 中本地模拟。

对于 Web 应用程序项目，请参见解决方案属性（在解决方案资源管理器中右键单击解决方案节点并选择属性）- Web（左侧选项卡）- 并查找虚拟路径文本框并进行适当更改（例如，从 '/ ' 到 '/your_site')

对于网站项目，单击解决方案资源管理器中的解决方案节点并查看属性对话框。最后一个选项是虚拟路径。

【讨论】：

【解决方案2】：

尝试更新网址。

background: url("./Images/lu/input_bg.png") repeat-x scroll left bottom transparent;

【讨论】：

更新了我的答案，看看是否有什么不同。

【解决方案3】：

检查您在服务器上的路径名。您可以访问 yoursite.com/Images/lu/input_bg.png 上的图像吗？真的是图像而不是图像吗？

【讨论】：

【解决方案4】：

我有同样的问题。我的图像没有显示在浏览器上然后我解决了。我像这样在图像路径的开头添加了两个点

<img src="../Images/icon48x48.png" alt="myLogo" width="48" height="48" />

【讨论】：

【解决方案5】：

您还可以清除浏览器的缓存。我有一个问题，我使用 css 文件设置 DIV 的背景，并且图像只会显示在 firefox 或 IE 中。在我清除 chrome 的缓存并重新启动站点后，图像出现了。

如果我的图片位于：mysite/App_Themes/Image

我的 CSS 文件位于 App_themes 引用中，如下所示：Image/myfile.css

【讨论】：