html - 站点在预览中运行良好，但在访问 index.html 文件时，背景图像丢失

Question

我遇到了一个问题，我真的不知道是什么原因造成的。我在括号中工作，该网站在预览中完美运行。

但是，当我单击实际的 index.html 文件时，我的 scss 中的背景图像丢失了。

• 通过 src 上传的图片有效
• 我的 sass 其余部分正在运行
• Js 正在工作
• 只有我的背景图像(使用 url)不再有效，所以我认为它与 url 有关系。

scss的一个例子:

.jumbfirst {
    background: url('/imagini/images/background6.jpg');
    background-size: cover;
    width: $fullwidth;
    min-height: 600px;      
}

有什么想法吗？谢谢你!

Answer 1

这取决于您的开发设置，这意味着您使用相对路径，但根据您的文件结构和您运行 index.html 的方式，浏览器读取路径的方式不同。我猜双击 index.html 文件不会从您的本地服务器显示它，而是像

这样的绝对路径

file:///Applications/XAMPP/xamppfiles/htdocs/devel/test/index.html

这个例子来自MAC，它是文件系统中index.html的路径。

您应该有一个本地开发服务器(例如 XAMPP )，或者如果您已经有一个，请将浏览器中的地址更改为类似

http://localhost/devel/test/index.html

在这种情况下，我从本地服务器调用 devel/test/目录中的 index.html。

希望这对您有所帮助。