Question

我有一个横幅标题，在网站的主目录中显示其横幅图像，但是一旦我将HTML文件移动到子文件夹并更新所有链接以反映文件夹更改，横幅图像就不再显示。在我的所有代码编辑器中，正确设置了图像的路径。您将在下面找到我的标题中的代码以及无法正常工作的代码部分。 top-banner.jpg是这里的问题。页面上的所有其他图像都可以工作，并且与横幅图像位于同一目录中。任何建议都将不胜感激。

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Products</title>
    <meta name="description" content="">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/font-awesome.css" rel="stylesheet">
    <link href="../css/flaticon.css" rel="stylesheet">
    <link href="../css/fopen-sans.css" rel="stylesheet">
    <link href="../css/raleway-webfont.css" rel="stylesheet">
    <link href="../css/lato.css" rel="stylesheet">
    <link href="../css/idangerous.swiper.css" rel="stylesheet">
    <link href="../css/magnific-popup.css" rel="stylesheet">
    <link href="../img/favicon.ico" rel="shortcut icon">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/responsive.css" rel="stylesheet">
  </head>



<div class="wpc-top-header overlay img-bg">
        <img src="../img/top-banner.jpg" alt="banner" class="hidden">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="wrapper">
                        <div class="heading">Our Products</div>
                        <div class="subheding">
                            <a href="index.html" class="link">home</a><span class="round"></span>
                            <a href="#" class="link">pages</a><span class="round"></span>
                            <a href="about.html" class="link active">Our Products</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

删除class="hidden"

中的<img src="../img/top-banner.jpg" alt="banner" class="hidden">

编辑：从提供的链接可以看出，文件/htmltest/js/scripts.js包含：

/*-------------------------*/ 
/*  ADD BACKGROUND IMAGE   */ 
/*-------------------------*/


$(".img-bg").each(function(){
    $(this).css("background-image", "url("+$(this).find("img").attr('src')+")");
});

但是，路径js/scripts.js未更新为../js/scripts.js，并且不会执行此脚本。因此，只需将所有js/替换为HTML文件中的../js/。

Answer 2

您的旧版本会在div标记中添加一个样式，其中包含类overlay。它补充说：

style="background-image: url("img/top-banner.jpg");"

然后将其添加到您的新<div>，但显然是新路径。这对我来说是固定的，所以现在澄清这条线应该是：

<div class="wpc-top-header overlay img-bg" style="background-image: url('../img/top-banner.jpg');">

目录更改后不显示横幅图像

2 个答案: