Как просматривать изображения локальной сети с удаленного интерфейса при использовании <img src = "" />?

У меня есть следующая настройка сети:

___________> [Remote IP] * can access anything from 192.168.1.2. | * it has a public static ip to access as 8x.8x.2xx.1x | ^ [WAN] | [Router] | |---[LAN] | [HTTP WEB SERVER]@192.168.1.2 | | --------------------------------------------------- (LAN) | | | [PC1] [PC2] [PC3] | | | 192.168.1.3 192.168.1.4 192.168.1.5 

Пример примера:

[OK]: PC1, PC2 имеет доступную форму изображения 192.168.1.3:7007/picture1.jpeg и 192.168.1.4:7007/picture1.jpeg

[OK]: PC3, если я открываю сайт с 192.168.1.2, я могу видеть picture1 и picture2. Как мой HTML-код:

 <img src="http://img.ruphp.com/php/picture1.jpeg?1323809545000?1323809546000?1323809547000" class="monitor_realtime" /> <img src="http://img.ruphp.com/php/picture1.jpeg?1323809545000?1323809546000?1323809547000" class="monitor_realtime" /> 

[НЕ ОК]: Но если я сейчас удаленно из публичного места, откройте страницу, я не вижу фотографии.

Как я могу видеть изображения, когда я открываю его удаленно (работа с локальным просмотром)?

Solutions Collecting From Web of "Как просматривать изображения локальной сети с удаленного интерфейса при использовании <img src = "" />?"

Вы говорите, что PC1 и PC2 также имеют веб-сервер, работающий на порту 7007? Если это так, предположительно, маршрутизатор не перенаправляет запросы на эти веб-серверы. Если вы планируете получать доступ к контенту, размещенному в локальной сети, маршрутизатор должен знать, как перенаправить эти запросы на соответствующий сервер.

EDIT : на основе контекста, представленного в вашем ответе m4tt1mus, вам нужно перейти со вторым вариантом. Вы можете настроить маршрутизатор для пересылки порта 81 на порт 7007 ПК1 и порт 82 на порт 7007 ПК2.

Контекст 192.168.1.4 отличается в зависимости от того, находитесь ли вы в локальной сети или на удаленном компьютере. Удаленный компьютер будет смотреть на свою собственную сеть (а не ваш) для этого изображения. Для работы с фотографиями необходимо использовать общедоступный IP-адрес или какой-либо другой удаленный адрес. Или вы можете использовать какой-то странный сервис, который вытаскивает их из локальной сети и кэширует их на веб-сервере или что-то в этом роде.

У меня была аналогичная проблема, но я не мог изменить конфигурацию маршрутизатора. Поэтому я придумал альтернативное решение для таких случаев. Вместо того, чтобы устанавливать маршрут из одной сети в другую, я изменил способ обслуживания изображений без изменения их местоположения. Мое решение описано здесь . Фрагменты кода для моего стека (Asp.NET/Nancy/Razor), но эта идея является технологической агностикой. Короче говоря, вы можете конвертировать изображения «на лету» в строку base64 и обслуживать их, встроенные в вашу страницу, с вашего общего сервера. Он отлично подходит для меня со следующим кодом (C #):

 private string convertToBase64(string imageURL) { var request = WebRequest.Create(imageURL); using (var response = request.GetResponse()) { using (var stream = response.GetResponseStream()) { using (Image image = Image.FromStream(stream)) { using (MemoryStream m = new MemoryStream()) { image.Save(m, image.RawFormat); byte[] imageBytes = m.ToArray(); string base64String = Convert.ToBase64String(imageBytes); return string.Format("data:image/png;base64,{0}", base64String); } } } } } 

И затем преобразованное изображение передается в представление как одно из свойств @Model (Base64Image):

 <img id="photo" src="@Model.Base64Image" title="@Model.Description" />