Question

当我在本地打开页面时，图像将被加载，但是当我转到ip时，图像将不被加载。图像与html文件位于同一目录中。

<!DOCTYPE html>
<html>
    <head>
    <script type="text/JavaScript">
    var img = new Image;

    img.onload = function(){
        var canvas = document.getElementById("can");
        var context = canvas.getContext("2d");

        context.drawImage(img, 0, 0);
        setTimeout(loadImage, 1000);
    };

    function loadImage(){
        img.src = 'image.jpg';
    }

    </script>

        <title>Page</title>
    </head>
    <body onload="JavaScript:loadImage();">
        <canvas id="can" width="1280" height="720" />
    </body>
</html>

Answer 1

我真的希望该解决方案对您有用，我只是通过添加斜杠符号并更改了onload =“ loadImage（）;来编辑图像的根部。”功能

<!DOCTYPE html>
<html>
    <head>
    <script type="text/JavaScript">
    var img = new Image;

    img.onload = function(){
        var canvas = document.getElementById("can");
        var context = canvas.getContext("2d");

        context.drawImage(img, 0, 0);
        setTimeout(loadImage, 1000);
    };

    function loadImage(){
        img.src = '/image.jpg';
    }

    </script>

        <title>Page</title>
    </head>
    <body onload="loadImage();">
        <canvas id="can" width="1280" height="720" />
    </body>
</html>

Answer 2

javascript的相对路径通常对我来说产生了意外的结果，如果它在一种浏览器中有效，则很可能在另一种浏览器中无效。我发现将根地址存储在配置文件中并设置绝对路径而不是相对路径非常方便。

const contentsBaseAddress = 'http://localhost:80/contents/'

function loadImage(){
    img.src = contentsBaseAddress + 'images/myImage.jpg';
}

图片未加载到网页上

2 个答案: