自己的图像托管页面：如何始终打开一个 html 文件，但在 url 中给出了图像？

Question

我目前正在开发自己的图片托管网站：https://img.baeni.de

一切正常，但我想改变一些东西。

目前，当从共享图像打开链接时，它只是简单地打开图像。我想用图像打开另一个 html 站点。图片应该是网址中给出的图片。

示例： 访问 img.baeni.de/u/123.png 会打开construct.html 文件并设置 以便url 中给出的图像将显示在该页面上。

重要提示：URL 仍应为 img.baeni.de/u/123.png 而不是 img.baeni.de/construct.html

我不想被灌输，但想了解你们将如何处理此类事情的一些想法。

最好的问候， 巴尼

Answer 1

我不确定，但这可能对你有用。

将以下内容放在 u/ 文件夹（或者根文件夹）的 .htaccess 中。

RewriteCond %{SCRIPT_FILENAME} !-d RewriteCond %{SCRIPT_FILENAME} !-f RewriteRule ^u/(.*)$ construct.html?img=$1 [QSA]

当访问者到达 img.baeni.de/u/123.png 时，网络服务器实际上会提供页面 img.baeni.de/construct.html?img=123 .png.

您可以像这样使用 javascript 来获取 URL：

// Will get /u/123.png
  var urlstr = window.location.pathname;

// Will turn it into 123.png
  var imgstr = str.split("/").pop();

要在页面加载后加载图像 src，请创建一个容器（如 div）来保存图像。然后 window.onload 可以使用图像或错误图像填充此容器。

<div id="image"></div>

<script>
  // On page load call an immediately invoked function to load the image
  window.onload(

    function(){

      // Will get /u/123.png
      var urlstr = window.location.pathname;

      // Will turn it into 123.png
      var imgstr = "/gfx/" + str.split("/").pop();

      // Error Image
      var errorImg = '/gfx/error.png';

      // Create the image in the div container
      document.getElementById('image').innerHTML="<img src='" + imgstr + "' onerror='this.onerror=null;this.src=\"" + errorImg + "\"'>";

    }()
  );
</script>