如果客户端来自外部 IP，则更改 img src 标签答案

【问题标题】：Change img src tag if client from external ip如果客户端来自外部 IP，则更改 img src 标签
【发布时间】：2017-05-21 23:40:34
【问题描述】：

我是一名初学者/爱好者程序员。我正在开发一个网络摄像头应用程序，该应用程序也有一些 gpio 引脚，方法是将我在网上找到的代码拼凑在一起。我在 index.php 文件中有一个 img src 标记，该标记需要根据我是从局域网内还是从外部访问该页面而更改。

我在另一个论坛上找到了以下信息无需手动更改 index.php 文件。

我在树莓派论坛上找到的选项：更改标签以使用您的外部 IP。如果这破坏了内部网络，您可以使用单独的页面来区分内部和外部，或者您可以编写一个脚本来确定 http 客户端是来自内部还是外部 IP，并相应地更改标签。

有人可以告诉我如何实现一个备用索引页面或脚本，根据客户端是在外部还是内部网络上更改 img src 标签？

这是带有img src标签的索引页面的代码：

    <!DOCTYPE html>
    !--TheFreeElectron 2015,        http://www.instructables.com/member/TheFreeElectron/ -->

<html>
<head>
    <meta charset="utf-8" />
    <title>Raspberry Pi Gpio</title>
</head>
 <body style="background-color: black;">    
    <center>
    <img src="http://192.168.0.34:8080/stream/video.mjpeg">
    </center>
 <!-- On/Off button's picture -->       
<?php
$val_array = array(0,0,0,0,0,0,0,0);
//this php script generate the first page in function of the file
for ( $i= 0; $i<8; $i++) {
    //set the pin's mode to output and read them
    system("gpio mode ".$i." out");
    exec ("gpio read ".$i, $val_array[$i], $return );
}
//for loop to read the value
$i =0;
for ($i = 0; $i < 8; $i++) {
    //if off
    if ($val_array[$i][0] == 0 ) {
        echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }
    //if on
    if ($val_array[$i][0] == 1 ) {
        echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }    
}
?>
<!-- javascript -->
    <script src="script.js"></script>
 </body>
</html>

谢谢

【问题讨论】：

只是不要在src中包含主机名：<img src="/stream/video.mjpeg">
内部 IP 是单个静态 IP，还是一系列不同的 IP？
您可能需要使用 JS 来“热加载”图像。执行类似if( window.location.test(/192\.168\./){ /* is local */ }else{ /* is external */ } 的操作，通过正则表达式测试构建图像的 src
谢谢@haxxxton。但我不确定在哪里添加此代码。我尝试将它添加到原始代码的底部。见下文，但不正确。你能帮我正确添加这个吗？ if (window.location.test(/192\.168\./){192.168.0.34:8080/stream/video.mjpeg">}else{56.94.2.23:8080/stream/video.mjpeg">}; } ?>

标签： javascript php html

【解决方案1】：

假设您使用 PHP 来呈现您的页面，您可以获取请求的 IP 并根据结果对呈现的输出进行更改。

get_client_ip() 回答帖子中列出了一些安全问题，但鉴于这只是用于更改图像的src，我相信没有真正的问题（除了可能暴露您的内部 IP 配置) 发给试图“欺骗”他们 IP 的人。

<?php 
    // https://stackoverflow.com/a/15699240/648350
    // Function to get the client IP address
    function get_client_ip() {
        $ipaddress = '';
        if (isset($_SERVER['HTTP_CLIENT_IP']))
            $ipaddress = $_SERVER['HTTP_CLIENT_IP'];
        else if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
            $ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
        else if(isset($_SERVER['HTTP_X_FORWARDED']))
            $ipaddress = $_SERVER['HTTP_X_FORWARDED'];
        else if(isset($_SERVER['HTTP_FORWARDED_FOR']))
            $ipaddress = $_SERVER['HTTP_FORWARDED_FOR'];
        else if(isset($_SERVER['HTTP_FORWARDED']))
            $ipaddress = $_SERVER['HTTP_FORWARDED'];
        else if(isset($_SERVER['REMOTE_ADDR']))
            $ipaddress = $_SERVER['REMOTE_ADDR'];
        else
            $ipaddress = 'UNKNOWN';
        return $ipaddress;
    }
    // define our default image src prefix
    $image_src_prefix = "http://192.168.0.34:8080/";
    const LOCAL_IP_PREFIX = "192.168."; // define our local ip prefix (ie. some LAN's use "10.0.")
    // test for ip starting with our local IP prefix
    if( substr(get_client_ip(), 0, strlen(LOCAL_IP_PREFIX)) !== LOCAL_IP_PREFIX ){
        // we are NOT local so update the image src prefix
        $image_src_prefix = "http://INSERT_EXTERNAL_IP_HERE/";
    }
?>
<!DOCTYPE html>
    !--TheFreeElectron 2015,        http://www.instructables.com/member/TheFreeElectron/ -->

<html>
<head>
    <meta charset="utf-8" />
    <title>Raspberry Pi Gpio</title>
</head>
 <body style="background-color: black;">    
    <center>
    <img src="<?php echo $image_src_prefix; ?>/stream/video.mjpeg">
    </center>
 <!-- On/Off button's picture -->      
<?php
$val_array = array(0,0,0,0,0,0,0,0);
//this php script generate the first page in function of the file
for ( $i= 0; $i<8; $i++) {
    //set the pin's mode to output and read them
    system("gpio mode ".$i." out");
    exec ("gpio read ".$i, $val_array[$i], $return );
}
//for loop to read the value
$i =0;
for ($i = 0; $i < 8; $i++) {
    //if off
    if ($val_array[$i][0] == 0 ) {
        echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }
    //if on
    if ($val_array[$i][0] == 1 ) {
        echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }   
}
?>
<!-- javascript -->
    <script src="script.js"></script>
 </body>

【讨论】：

谢谢！效果很好！感谢您实际发布代码。这很有帮助。