显示来自网站 URL (json) 的图像以在本地主机中本地显示

Question

我有 json 供稿给我缩略图 url。这个returnsurl喜欢/webapps/CC/fileAPI/edc_eventcal/Celebrations_Todmorden%20Mills%20Harvest%20Festival_th__Vb2eHh-nEpJ8xLLEU5UFw.png

现在，之前 /webapps/ 需要 "app.toronto.ca" 才能获取完整路径。所以我像这样将 "localhost" 替换为 "app.toronto.ca" 。它给了我完整的图像路径。

现在，问题是，即使我检索了完整的 URL，image.src 语法仍然会强制计算机将 'Localhost:5000/' 添加到我完美组装的 URL 中。

function displayEvent(array,i){


    var image_url = array[i].calEvent.thumbImage.url;
    var image =new Image();
    var hostname = location.hostname;

    toronto_host = hostname.replace("localhost","app.toronto.ca") + 
    image_url;
    alert(toronto_host); //this give me pull URL path//

    image.src = toronto_host;
    alert(image.src);  
    // this gives localhost:5000/what_i_had_in_toronto_host//


    document.getElementById("party_picture").appendChild(image);


};

因为没有图像路径以 http://localhost:5000/ 开头...我在测试网站时无法使用任何图像。

有什么方法可以在没有本地主机部分的情况下使用正确的 url 分配图像 src？

谢谢！

Answer 1

图片 src 属性将始终附加本地主机（或页面的来源），如果您不提供完整的 URL（在您的情况下，您提供了协议以外的所有内容） .

toronto_host = hostname.replace("localhost","//app.toronto.ca") + 
image_url;
                                          // ^ appending '//' before your
                                          // location will force the browser 
                                          // to set the protocol to the current
                                          // one of the page.

这将使您的 img.src 表现出预期的效果。

显示来自网站 URL (json) 的图像以在本地主机中本地显示

Displaying image from website URL (json) to display locally in localhost

javascript

json

hostname

imagesource