js页面如何访问服务器上图片 • Worktile社区

worktile

Worktile官方账号

要访问服务器上的图片，可以使用JavaScript通过以下步骤来实现：

了解服务器上图片的路径：首先，你需要知道服务器上图片的路径。路径可以是绝对路径（例如：http://example.com/images/image.jpg），也可以是相对路径（例如：/images/image.jpg）。如果是相对路径，路径是相对于当前页面的位置。
创建一个img元素：使用JavaScript，你可以通过document.createElement()方法创建一个img元素。

var img = document.createElement('img');

设置img元素的src属性：接下来，设置img元素的src属性为服务器上图片的路径。

img.src = 'http://example.com/images/image.jpg'; // 或者使用相对路径：img.src = '/images/image.jpg';

插入img元素到页面中：最后一步是将img元素插入到页面中，可以使用appendChild()方法将img元素添加到页面中的某个容器中。

document.body.appendChild(img); // 或者将img元素添加到其他容器中

完成以上步骤后，页面将会加载并显示服务器上的图片。

需要注意的是，为了保证图片加载的成功，服务器必须允许跨域访问。如果服务器不允许跨域访问，你需要在服务器端进行相应的设置。另外，还可以使用XMLHttpRequest或Fetch API来获取图片数据并显示在页面上，这需要处理一些异步的操作，但同样可以达到访问服务器上图片的目的。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在JS页面中，可以通过以下几种方式来访问服务器上的图片：

使用标签：可以使用HTML的标签在网页上展示服务器上的图片。例如：

<img src="http://server.com/image.jpg" />

需要注意的是，图片的URL需要正确指向服务器上的图片资源。

使用AJAX请求：可以通过AJAX请求来获取服务器上的图片数据，并在页面上展示。例如使用XHR对象：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://server.com/image.jpg", true);
xhr.responseType = "blob";  // 设置请求返回的数据类型为Blob
xhr.onload = function() {
  if (xhr.status === 200) {
    var imageUrl = URL.createObjectURL(xhr.response);  // 创建一个临时的图片URL
    var img = new Image();
    img.src = imageUrl;
    document.body.appendChild(img);  // 将图片插入到页面中
  }
};
xhr.send();

在上述代码中，首先创建一个XMLHttpRequest对象，然后使用open方法指定请求的URL和请求方法。接下来，设置responseType为"blob"，表示请求返回的是二进制数据。在请求加载完成时，检查请求的状态码，如果是200，则创建一个临时的图片URL，并将其赋值给一个新的Image对象的src属性，最后将图片插入到页面中。

使用fetch API：fetch是一种现代的基于Promise的API，用于发起网络请求。可以使用fetch API来获取服务器上的图片，并在页面上展示。例如：

fetch("http://server.com/image.jpg")
  .then(response => response.blob())  // 将响应转换为Blob对象
  .then(blob => {
    var imageUrl = URL.createObjectURL(blob);  // 创建一个临时的图片URL
    var img = new Image();
    img.src = imageUrl;
    document.body.appendChild(img);  // 将图片插入到页面中
  });

在上述代码中，使用fetch方法请求图片资源，然后使用.then方法链式调用，将响应转换为Blob对象，再将其转换为临时的图片URL，并将图片插入到页面中。

使用WebSocket：如果服务器上的图片是实时更新的，可以使用WebSocket实时获取图片。WebSocket是一种双向通信协议，在客户端和服务器之间建立持久化的连接。可以使用WebSocket发送图片的URL，然后在页面上展示。例如：

var socket = new WebSocket("ws://server.com/");
socket.onopen = function() {
  var message = { image: "http://server.com/image.jpg" };
  socket.send(JSON.stringify(message));  // 发送消息，包含图片的URL
};
socket.onmessage = function(event) {
  var imageUrl = event.data;  // 接收服务器发送的图片URL
  var img = new Image();
  img.src = imageUrl;
  document.body.appendChild(img);  // 将图片插入到页面中
};

在上述代码中，首先创建一个WebSocket对象，并指定服务器的URL。在连接打开时，发送一个包含图片URL的消息到服务器。服务器接收消息后，将图片的URL发送回客户端，客户端接收到消息后，创建一个新的Image对象，并将图片插入到页面中。

使用其他前端框架/库：如果你在使用像Vue.js、React或Angular这样的前端框架或库，它们通常提供了更方便的方法来加载和处理图片。可以根据具体的框架或库的文档来查找适合的方法来访问服务器上的图片。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

要访问服务器上的图片，可以使用JavaScript中的AJAX技术或者直接在HTML中使用<img>标签来实现。

方法一：使用Ajax技术

创建一个XMLHttpRequest对象
在JavaScript中创建一个XMLHttpRequest对象，用于发送请求和接收响应。
```
var xhr = new XMLHttpRequest();
```
使用GET方法发送请求
使用xhr.open()方法设置请求方法和URL，并使用xhr.send()方法发送请求。
```
var url = "http://example.com/path/to/image.jpg";
xhr.open("GET", url, true);
xhr.send();
```

监听并处理响应
使用xhr.onload事件监听响应，并在回调函数中处理响应。

xhr.onload = function() {
  if (xhr.status === 200) {
    // 将服务器上的图片显示在页面上
    var img = document.createElement("img");
    img.src = URL.createObjectURL(xhr.response);
    document.body.appendChild(img);
  }
}

方法二：使用<img>标签
可以直接在HTML中使用<img>标签来加载服务器上的图片。

<img src="http://example.com/path/to/image.jpg" alt="My Image">

这种方法是通过在HTML中插入一个<img>标签，浏览器会自动发送请求并显示图片。

但是要注意的是，在使用<img>标签时，需要确保服务器上的图片是可公开访问的，否则会显示访问权限错误。

另外，可以使用JavaScript动态生成<img>标签，如下所示：

var img = document.createElement("img");
img.src = "http://example.com/path/to/image.jpg";
document.body.appendChild(img);

通过设置img.src属性，可以创建一个新的<img>标签，并将其添加到页面中。

1年前 0条评论