Question

ng build --prod --source-map=false --output-hashing=none --base-href=/test/
--build-optimizer=false

我想从我提供的API中提取图像，但无法在html文件中显示

输出显示：

<button type = "button" onclick="loadDoc">IMAGE TEST</button>
<p id = "demo"></p>
<script>
    function loadDoc(){
        for (let item in Response.items) {
             for (let camera in item.cameras) {
                  const imageUrl = camera.image; 
                  document.getElementById("demo").innerHTML=camera.image;
             }
        }
        xhr.open("GET","https://api.data.gov.sg/v1/transport/traffic-images",true);
        xhr.send();
    };
</script>

Answer 1

您提供的代码存在一些问题：

您正在for循环内使用document.getElementById("demo")。您实质上是一次又一次地查询相同的元素，并且总是得到相同的结果。如果只需要更新一个元素，只需将其放在for循环外，将其保存到变量中，然后在循环内使用即可。如果您要更新多个元素，则可能应该使用动态类名或以不同的方式查询元素。
对于图像，您不应使用innerHTML。相反，您可以使用HTML <img>标签并更新src属性，也可以使用<div>或<span>这样的通用HTML标签并应用{{1} }和图片的网址。
您没有正确使用xhr。您试图在发送响应之前访问它。查看有关如何实例化和使用xhr对象的示例：Sending an XMLHttpRequest

Answer 2

camera.image解析为字符串"https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg"，因此document.getElementById("demo").innerHTML=camera.image只需将<p id="demo"></p>元素的内容设置为此字符串：

<p id="demo">
    https://images.data.gov.sg/api/traffic-images/2018/12/05cd4190-b4e4-430c-b1c1-7047972c09fe.jpg
</p>

应该清楚为什么它不起作用：您正在将文本放入<p>元素中并期望它显示图像。那行不通。您需要使用<img>并将其src属性设置为此URL才能使代码按照您希望的方式工作：

HTML：

<img id="demo" src="">

Javascript：

$('#demo').attr('src', camera.image);

Answer 3

这看起来如何？当然，您必须自己实现AJAX调用，什么都可以，但是您明白了吗？

编辑

您是否想看看fetch API？如果您想使用xhr，那是很公平的，但是fetch只是实现xhr的一种更新更好的方法。

const url = 'https://api.data.gov.sg/v1/transport/traffic-images';
let appRoot, btn;

// Go get the data, return a promise. 
const getData = () => fetch(url).then(imgs => imgs.json());

// Output the image. 
const processImage = img => {
  const el = document.createElement("img");
  el.setAttribute("src", img.image);
  appRoot.append(el);
};

// Iterate over the data from the getData function.
const process = data => {
  appRoot.innerHTML = "";
  data.items.forEach(o => o.cameras.forEach(img => processImage(img)));
};

// Bind the event hanlder to the event. 
const bindEvents = () => btn.onclick = () => getData().then(process);

// A simple function to launch everything.
const launch = () => {
  console.log('Starting...');
  btn = document.getElementById("loadDoc");
  appRoot = document.getElementById("demo");
  bindEvents();
};

// Start the app.
launch();

<button type="button" id="loadDoc">IMAGE TEST</button>
<div id="demo"></div>

Answer 4

您的代码中存在几个问题：

您根本没有定义class API { /** * @var string */ private $ip = "http://localhost:5000"; /** * @var string */ private $baseUrl = "/M-Pages/Api"; private $port; private $method; private $header; private $body; private $rout; private $curl; /** * API constructor. */ public function __construct() { $this->curl = curl_init(); } /** * @param $rout * @param $method * @param null $port * @param array $header * @param array $body */ public function curlRequest($rout , $method = null , $port = null,$header = ["content-type: application/json"] , $body = []) { // set parameter of request $this->initRequestParameters($rout, $method, $port, $header, $body); // set option of request $this->initCurlOptions(); // execute curl request and get result $response = curl_exec($this->curl); // get error of curl request $err = curl_error($this->curl); // close curl // check error of request if ($err) { //TODO :error change echo "CURL Error #:" . $err;//TODO: set custom error function } else { return $response; curl_close($this->curl); } } /** * @param $rout * @param $method * @param null $port * @param array $header * @param array $body */ private function initRequestParameters($rout , $method , $port = null, $header = ["content-type: application/json"] , $body = []){ $this->port = $port != null ? $port : "5000"; // var_dump( $this->port ); $this->method = $method != null ? strtoupper($method) : "GET"; // var_dump( $this->method); $this->header = $header != [] ? $header :["content-type: application/json"]; // var_dump($this->header); $this->body = $body != [] ? $body : []; // var_dump($this->body); $this->rout = $rout; // var_dump( $this->rout); } /** * @return resource */ private function initCurlOptions() { switch ($this->method) { case "POST": $this->initPostRequestOption(); break; case "GET": $this->initGetRequestOption(); break; } return $this->curl; } private function initPostRequestOption() { curl_setopt_array($this->curl, array(CURLOPT_PORT => $this->port, CURLOPT_URL => $this->ip . $this->port . $this->baseUrl . $this->rout, CURLOPT_RETURNTRANSFER => true, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => $this->method, CURLOPT_HTTPHEADER => $this->header) ); // var_dump( $this->ip . $this->port . $this->baseUrl . $this->rout); } private function initGetRequestOption() { curl_setopt_array($this->curl, array(CURLOPT_PORT => $this->port, CURLOPT_URL => $this->ip . $this->port . $this->baseUrl . $this->rout, CURLOPT_RETURNTRANSFER => true, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => $this->method, CURLOPT_HTTPHEADER => $this->header) ); } } part b:---------------------------- $body = "{\n \"params\" : {\"user_name\":\"".$user_name . "\"}}"; // var_dump($body); $this->api = \DI::mapClass("API", "API", $GLOBALS["namespace"]["service"]); // echo 'api FIRST'; $res = $this->api->curlRequest("/First/login","POST",[],[], $body); $res = json_decode($res, true); var_dump($res); exit();。您需要创建一个xhr对象才能调用XMLHttpRequest。
您没有为XHR定义要在请求完成时执行的send()处理程序，您的逻辑只是放置在函数的根目录中，因此只会导致错误。
您在数组中使用onload循环。使用普通的for..in循环，或者最好使用for
您正在更新forEach()元素的 text 而不设置#demo的{{1}}
您需要为返回的JSON中的每个项目创建一个新的src元素，然后将其添加到DOM中，大概是在img元素中
您正在使用内联事件处理程序img，应避免使用该事件。改用不引人注目的事件处理程序，例如。 #demo。

请牢记所有这些要点：

onclick

addEventListener()

想要从API提取图像，但是我的代码仅显示文本。

4 个答案:

编辑