背景图片不显示在服务器中答案

【问题标题】：Background image not displaying in server背景图片不显示在服务器中
【发布时间】：2017-07-07 18:51:06
【问题描述】：

我正在尝试在服务器中托管 Web 应用程序，但问题是当我在 localhost 中运行应用程序时，背景图像正在显示，但是当我在 服务器 上托管它时> 特别是背景图片根本没有加载请帮助解决这个问题

这里是代码

<!DOCTYPE html>

<html>
<head>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
    background-image: url('~/img/smpl4.jpg');
    min-height: 100%;
    background-position: center;
    background-size: cover;
}
</style>
</head>

<body class=" bgimg" >
</body>
</html>

我该如何解决这个问题？

我可以从 gridview 按钮获取图像

<asp:ImageButton ID="imgbtnEdit" style="margin-left:5px" runat="server" ToolTip="Edit" CommandName="Edit" ImageUrl="~/img/edit.png" Height="32px" Width="32px"/>

这里的图像正在完美加载它无法加载背景图像。

当我检查页面时它是这样的

加载资源失败：服务器响应状态为 404（未找到）

【问题讨论】：

你把图片上传到服务器了吗？
你的文件夹结构一样吗？
@MandarSant 是的，我已将图像上传到服务器
可能是路径
@Suhas 因为您引用的路径无效。尝试使用 DEv 工具放置硬编码路径（按 F12 并手动设置路径）并检查会发生什么？另外，您可以查看开发工具中是否发生任何错误

标签： javascript html css asp.net image

【解决方案1】：

我正在使用图像的直接 url 现在它工作正常它直接通过 http url

加载图像

background-image: url('http://www.sample.com/sample/img/smpl4.jpg');

【讨论】：

【解决方案2】：

或者可能是错误的路径？ index.html是这样写的吗？

workspace/    
workspace/img/smpl4.jpg    
workspace/css/style.css    
workspace/index.html

如果在 index.html 中

写url('img/smpl4.jpg')

如果在 style.css 中

写url('../img/smpl4.jpg')

【讨论】：

【解决方案3】：

{我不能写评论所以我复制了 suhas 回复评论}

是的，我将路径 sample.net/sample/img/smpl4.jpg 设置为工作正常，但我怀疑 /img/smpl4.jpg 之间是否有任何区别，因为它是从服务器目录加载的，而它是从互联网加载的它影响页面的安全性，我是初学者请解释 – Suhas

解释：

当您指向根目录时，您是否设置了“~/”或“/”。在你的如果您的根目录是“sample.net”（可能）。假设您将根目录设置为“sample.net”，那么您可以使用“/sample/img/smpl4.jpg”（冒号（'）后的第一个斜杠（/）考虑来自根目录的路径）。

【讨论】：

【解决方案4】：

您不能在客户端代码中使用根路径运算符~，它仅适用于由 .NET 运行的代码。 <ImageButton ImageUrl= "~/img/edit.png" /> 有效，因为它正在服务器端运行。

更改为绝对路径，或不带根元素的相对路径。像../img/smpl4.jpg 这样的东西。根据您的服务器设置，您还可以通过/img/smpl4.jpg 访问。

听起来您需要弄清楚正确的 URL 应该是什么，并通过手动将其输入浏览器来加载它。在 Chrome 中，右键单击您的一张图像（显示正确的图像），然后单击检查元素。在 chrome 开发工具中，您将看到图像的完整 URL。使用工作 URL 作为示例，了解如何访问您的其他图像。

【讨论】：

@Suhas 我已经更新了答案。我提供的 URL 只是示例。如果没有看到您的文件夹结构或完整 URL，我无法猜测您的相对路径是什么。
是的，我设置了路径 sample.net/sample/img/smpl4.jpg 它工作正常，但我怀疑 /img/smpl4.jpg 之间有什么区别，因为它从 服务器目录 加载，并且从 internet 加载它会影响页面的安全性吗？我是初学者，请解释一下
除非您提供更多信息，否则我无法提供更多建议。我们确实需要知道您是如何访问该网站的（例如 url），以及您网站的目录结构。

【解决方案5】：

确保图片的扩展名与代码匹配。上传的图片扩展名必须是 smpl4.jpg 而不是 smpl4.JPG

这不会影响本地，但在服务器端图像将不可见。检查图像的扩展名并将其更改为小写，就像您的代码 smpl4.jpg 一样。上传该图像并检查。

【讨论】：

【解决方案6】：

也许检查您的文件名 (fontCase)？ smpl4.jpg？ smpl4.JPG?

:)

【讨论】：

【解决方案7】：

要在服务器上显示图像，您应该在进入图像所在的目录后将图像的权限更改为 755。

chmod -R 755 smpl4.jpg

【讨论】：

在哪里更改此权限
在服务器上通过终端转到图像所在的文件夹，然后执行上述命令，如果您使用的是 linux 服务器。如果在 Windows 服务器上只需右键单击图像，然后将其权限更改为读取、写入和执行。