时间戳

首页 > 解决方案 > 上传到网络服务器时链接文件不起作用

html - 上传到网络服务器时链接文件不起作用

问题描述

我一直在为我的学校在这个网站上工作，当我在本地工作时（atom/wamp/etc..）一切正常，但是当我将文件上传到我的网络服务器时（旧笔记本电脑我放了 ubuntu 18.04 并安装了灯服务器）、css 文件、图像和 href 链接不起作用。我知道这是在本地工作的文件路径中的一个问题，但由于“../”指向 root 或其他东西，所以在上传到 linux 服务器时没有。

这就是 index.php 在本地的样子

这就是它在网络服务器上的样子

这就是我的文件的组织方式（使用树窗口 cmd 生成）

C:.
|   index.php
|   README.md
|   tree.txt       
+---css
|       accueil.css
|       footer.css
|       header.css
|       
+---fonts
|       Lato-Black.ttf
|       Lato-BlackItalic.ttf
|       Lato-Bold.ttf
|       Lato-BoldItalic.ttf
|       Lato-Hairline.ttf
|       Lato-HairlineItalic.ttf
|       Lato-Heavy.ttf
|       Lato-HeavyItalic.ttf
|       Lato-Italic.ttf
|       Lato-Light.ttf
|       Lato-LightItalic.ttf
|       Lato-Medium.ttf
|       Lato-MediumItalic.ttf
|       Lato-Regular.ttf
|       Lato-Semibold.ttf
|       Lato-SemiboldItalic.ttf
|       Lato-Thin.ttf
|       Lato-ThinItalic.ttf
|       Oswald-Bold.ttf
|       Oswald-BoldItalic.ttf
|       Oswald-Demi-BoldItalic.ttf
|       Oswald-DemiBold.ttf
|       Oswald-Extra-LightItalic.ttf
|       Oswald-ExtraLight.ttf
|       Oswald-Heavy.ttf
|       Oswald-HeavyItalic.ttf
|       Oswald-Light.ttf
|       Oswald-LightItalic.ttf
|       Oswald-Medium.ttf
|       Oswald-MediumItalic.ttf
|       Oswald-RegularItalic.ttf
|       Oswald-Stencil.ttf
|       oswald.regular.ttf
|       PlayfairDisplay-Black.otf
|       PlayfairDisplay-BlackItalic.otf
|       PlayfairDisplay-Bold.otf
|       PlayfairDisplay-BoldItalic.otf
|       PlayfairDisplay-Italic.otf
|       PlayfairDisplay-Regular.otf
|       PlayfairDisplaySC-Black.otf
|       PlayfairDisplaySC-BlackItalic.otf
|       PlayfairDisplaySC-Bold.otf
|       PlayfairDisplaySC-BoldItalic.otf
|       PlayfairDisplaySC-Italic.otf
|       PlayfairDisplaySC-Regular.otf
|       
+---images
|   |   cedex.png
|   |   fax.png
|   |   Fb.png
|   |   horaire.png
|   |   identite_photo.jpg
|   |   instagram.png
|   |   localisation.png
|   |   Logo.png
|   |   logo_header.png
|   |   mail.png
|   |   notre_histoire_photo.jpg
|   |   Partenaire1.jpg
|   |   Partenaire2.png
|   |   Partenaire3.png
|   |   Partenaire4.jpg
|   |   paysage.jpg
|   |   region.png
|   |   site.png
|   |   slide1.jpg
|   |   slide2.jpg
|   |   slide3.jpg
|   |   tel.png
|   |   twitter.png
|   |   valeurs_photo.jpg
|   |   
|   \---favicon
|           android-chrome-192x192.png
|           android-chrome-512x512.png
|           favicon-16x16.png
|           favicon-32x32.png
|           favicon.ico
|           
+---includes
|       accueil.html
|       footer.html
|       header.html
|       slide.js
|       
\---pages
    +---accueil
    +---activite
    |       activite.css
    |       activite.php
    |       
    +---adhesion
    |       adhesion.php
    |       
    +---connaitre_la_cftc
    |       connaitre_la_cftc.css
    |       connaitre_la_cftc.php
    |       histoire.css
    |       histoire.php
    |       identite.css
    |       identite.php
    |       valeurs_et_identite.css
    |       valeurs_et_identite.php
    |       
    +---coordonnees
    |       coordonnees.css
    |       coordonnees.php
    |       federation_cftc_fpt.css
    |       federation_cftc_fpt.php
    |       syndicat_cftc_fpt_34.css
    |       syndicat_cftc_fpt_34.php
    |       ud34.css
    |       ud34.php
    |       
    +---syndicat_la_cftc
    |       syndicat_la_cftc.css
    |       syndicat_la_cftc.php
    |       
    +---templates
    |       template_header_footer.php
    |       
    +---viepratique
    |       viepratique.php
    |       
    \---viepro
            formation.css
            formation.php
            viepro.css
            viepro.php

这是我的文件的一些示例：

index.php（在我网站的主目录中）

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="32x32" href="../IMAGES\favicon\favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../IMAGES/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <title>Accueil CFTC</title>
  </head>

  <body>
    <?php include ('includes/header.html'); ?>
    <?php include ('includes/accueil.html'); ?>
    <br><br><br><br><br><br><br><br><br><br>
 </body>
   <?php include ('includes/footer.html'); ?>
</html>

我的头文件（在/includes/header.html中），（链接的css在/css/header.css中）。

不会放所有代码，因为它只是重复自己

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/header.css">
  <link rel="icon" type="image/png" sizes="32x32" href="../../IMAGES\favicon\favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="../../IMAGES/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <title>Header</title>
</head>


<body>
  <header>
  <div id="header_bar">
    <div id="header_bar_text" class="gpd-text">Syndicat Constructif, Partenaire du Dialogue Social
    </div>
  </div>
  <nav>
    <div href="/index.php" id="logo_header"><img src="/images/logo_header.png"></div>
    <label for="drop" class="toggle">Menu</label>
    <input type="checkbox" id="drop"/>
    <ul class="menu">
      <li><a target="_blank" href="/index.php">Accueil</a></li>
      <li>
        <label for="drop-1" class="toggle">Connaitre la CFTC +</label>
        <a target="_blank" href="/pages/connaitre_la_cftc/connaitre_la_cftc.php">Connaitre la CFTC</a>
        <input type="checkbox" id="drop-1" />
        <ul>
          <li><a target="_blank" href="/pages/connaitre_la_cftc/histoire.php">Histoire</a></li>
          <li><a target="_blank" href="/pages/connaitre_la_cftc/valeurs_et_identite.php">Valeurs et Identité</a></li>
        </ul>
      </li>

还有一个我在网站上获得的页面示例（仅举一个示例，因为它们都是相同的“布局”）（所有页面在同一文件夹中都有它们的 .css 文件，除了页眉和页脚以及“accueil”）。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="32x32" href="../../IMAGES\favicon\favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../../IMAGES/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="stylesheet" href="connaitre_la_cftc.css">
    <title>Connaitre la CFTC</title>
  </head>

  <!-- HEADER DE LA PAGE -->
   <?php include ('../../includes/header.html'); ?>

  <body>
    <br>
    <div id="i16x">
      <a href="histoire.php" class="gpd-button1" id="i6rl">Histoire</a>
      <a href="valeurs_et_identite.php" class="gpd-button1" id="ik2f">Valeurs et identité</a>
    </div>
    <br>
 </body>

  <!-- FOOTER DE LA PAGE -->
  <?php include ('../../includes/footer.html'); ?>
</html>

只想说，不仅css文件没有链接，图像和字体也没有。感谢您的阅读，我会提供任何帮助！

标签： htmlcsslinuxapache

解决方案

几件事.."../../IMAGES\favicon\favicon-32x32.png"可能不会在网络服务器上运行。如果 xxx.com 是您的网站，并且您的图片位于 (webroot)/images/ 中，则只需链接到

/images/favicon/favicon-32x32.png

与 css 相同。只要确保目录对齐即可。在您的示例中，您尝试使用链接到 webroot 目录

<link rel="stylesheet" href="connaitre_la_cftc.css">

但是，您说您的 css 文件在 css 文件夹中？所以也许试试

<link rel="stylesheet" href="/css/connaitre_la_cftc.css">

反而？

老实说，如果没有实时查看页面，这很难提供帮助，但是如果您怀疑正在加载某些内容，只需检查源并尝试直接转到文件（右键单击，按检查源，然后单击 href 以查看它是否加载，以及它试图从哪里加载）。然后，您可以在服务器上移动东西，直到它工作为止。

推荐阅读