Собственная страница хостинга изображений: Как всегда открыть файл html, но с изображением, указанным в URL?

Question

В настоящее время я работаю на своем собственном хостинге изображений: https://img.baeni.de

Все работает нормально, но я хочу что-то изменить.

В настоящее время при открытии ссылки из общего изображения просто открывается изображение. Я хочу открыть еще один html сайт с изображением. Изображение должно быть изображением, указанным в URL.

Пример. Посещение img.baeni.de/u/123.png открывает конструкцию. html file & устанавливает так, чтобы изображение , который указан в URL, будет показан на этой странице.

Важно: URL-адрес должен быть img.baeni.de/u/123.png & NOT img.baeni.de/construct.html

Я не хочу кормить ложкой, но хочу получить некоторые идеи о том, как вы, ребята, справились бы с чем-то подобным.

С уважением, baeni

Answer 1

Я не уверен, но это может сработать для вас.

Поместите следующее в .htaccess в папке u / (или, возможно, в папке root).

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();

Чтобы загрузить изображение sr c после загрузки страницы, создайте контейнер (например, 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>