背景

Question

我提前道歉，因为这可能是一个初学者问题。但情况如下：

背景

我有一个看起来像这样的静态包：

<!--********************************************* Mainmenu Start *********************************************-->
    <div id="menu_wrapper">
      <div id="menu_left"></div>
      <ul id="menu">
        <li><a href="index-2.html">Accueil</a></li>
        <li><a href="banner2.html">Second banner</a></li>
        <li><a href="post_list.html">post list</a></li>
        <li><a href="post.html">Post</a></li>
        <li><a href="post_game.html">Post with game</a></li>
        <li><a href="full_page.html">Full page</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contacte</a></li>
      </ul>
      <div id="menu_right"></div>
    </div>

    <!--********************************************* Mainmenu end *********************************************-->

    <!--********************************************* Banner start *********************************************-->
    <div id="da-slider" class="da-slider">
      <div class="da-slide">
        <h2><a href="#" class="da-link">For gamer by gamers</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
          Ut iaculis lorem vitae arcu elementum pellentesque. <br />
          Praesent pellentesque ornare neque id lobortis.</p>
        <div class="da-img"><img alt="alt_example" src="images/paralax_banner/3.png"  /></div>
      </div>
      <div class="da-slide">
        <h2><a href="#" class="da-link">TEKKEN TAG 2</a></h2>
        <p>Phasellus ac leo turpis. Morbi at pulvinar augue. <br />
          Aenean rhoncus ultrices volutpat. Vivamus eget enim ut orci iaculis condimentum sed a quam. </p>
        <div class="da-img"><img alt="alt_example" src="images/paralax_banner/2.png"  /></div>
      </div>
      <div class="da-slide">
        <h2><a href="#" class="da-link">WOW CATACLYSM</a></h2>
        <p>Etiam eu massa lectus. Nunc mi velit, commodo ut ullamcorper et, consectetur vel dolor. Etiam tincidunt convallis metus non suscipit.</p>
        <div class="da-img"><img alt="alt_example" src="images/paralax_banner/1.png"  /></div>
      </div>
      <div class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </div>
    </div>

    <!--********************************************* Banner end *********************************************-->

在index.html assets/ ├── image1.png └── image2.png内，我的图像标记如下所示：

index.html

因此，当我在端口<img src="/assets/image1.png" />上本地托管静态服务器时，我转到8000，浏览器向localhost:8000发出请求，一切正常。

问题

我的客户端实际上是使用NGINX将http://localhost:8000/assets/image1.png指向静态包。这意味着在浏览器中输入http://example.com/portal会让您看到http://example.com/portal页面。

他告诉我，我需要为所有静态资产添加index.html前缀，否则它将无效。这意味着我的/portal代码需要看起来像这样，而不是上面的代码：

img

如果我不这样做，他说浏览器最终请求<img src="/portal/assets/image1.png" />而不是http://example.com/assets/image1.png。

这为我搞砸了，因为我必须扭曲我正在使用的框架以适应这一点。这意味着我必须为开发和构建编写一些额外的脚本，这很烦人并污染了回购。

他的NGINX配置有问题吗？或者我是否真的必须为所有链接附加http://example.com/portal/assets/image1.png前缀，或者他的NGINX配置可能出现问题？

我无法访问他的NGINX配置，我对NGINX也没有太多经验。

Answer 1

解决方案很简单，可以使用基本标记

https://www.w3schools.com/tags/tag_base.asp

您将更改头标记中的index.html及以下

<head>
<base href="/portal/">
</head>

并且您将链接更改为相对链接而不是绝对链接。所以下面

<img src="/assets/image1.png" />

应该改为

<img src="assets/image1.png" />

现在，您将能够将静态文件部署到NGINX上的/portal

使用NGINX将静态资源请求重写为子文件夹

背景

问题

1 个答案: