Get image url using image id

时间:2019-02-23 作者:n1kkou

我正在寻找一种解决方案,从上传的媒体id开始获取图像url。

我使用一个自定义字段来指定要在帖子页面上显示哪些图像。然后,我用REST api检索图像ID,我需要根据检索到的ID创建一个图像库。

有人知道如何根据图像id(使用.js文件中的AJAX调用)检索图像url吗<类似于WP-php版本的WP-get-attachment-image。

2 个回复
最合适的回答,由SO网友:Krzysiek Dróżdż 整理而成

您可以使用REST APIretrieve media item. 只需将GET请求发送到此地址(将example.com更改为您的站点):

http://example.com/wp-json/wp/v2/media/<id>
如果您传递了正确的ID,那么您将获得有关该媒体文件的所有信息。例如,对于我的一个图像文件,我得到了如下结果:

{
  "id": 546,
  "date": "2019-01-23T11:22:15",
  "date_gmt": "2019-01-23T10:22:15",
  "guid": {
    "rendered": "https://example.com/wp-content/uploads/2019/01/my-icon.png"
  },
  "modified": "2019-01-23T11:22:15",
  "modified_gmt": "2019-01-23T10:22:15",
  "slug": "my-icon",
  "status": "inherit",
  "type": "attachment",
  "link": "https://example.com/my-icon/",
  "title": {
    "rendered": "my-icon"
  },
  "author": 1,
  "comment_status": "open",
  "ping_status": "closed",
  "template": "",
  "meta": [],
  "description": {
    "rendered": "<p class=\\"attachment\\"><a href=\'https://example.com/wp-content/uploads/2019/01/my-icon.png\'><img width=\\"300\\" height=\\"300\\" src=\\"https://example.com/wp-content/uploads/2019/01/my-icon.png\\" class=\\"attachment-medium size-medium\\" alt=\\"\\" srcset=\\"https://example.com/wp-content/uploads/2019/01/my-icon.png 300w, https://example.com/wp-content/uploads/2019/01/my-icon-150x150.png 150w\\" sizes=\\"(max-width: 300px) 100vw, 300px\\" /></a></p>\\n"
  },
  "caption": {
    "rendered": ""
  },
  "alt_text": "",
  "media_type": "image",
  "mime_type": "image/png",
  "media_details": {
    "width": 300,
    "height": 300,
    "file": "2019/01/my-icon.png",
    "sizes": {
      "thumbnail": {
        "file": "my-icon-150x150.png",
        "width": "150",
        "height": "150",
        "mime_type": "image/png",
        "source_url": "https://example.com/wp-content/uploads/2019/01/my-icon-150x150.png"
      },
      "portfolio-thumbnail": {
        "file": "my-icon-300x240.png",
        "width": "300",
        "height": "240",
        "mime_type": "image/png",
        "source_url": "https://example.com/wp-content/uploads/2019/01/my-icon-300x240.png"
      },
      "full": {
        "file": "my-icon.png",
        "width": 300,
        "height": 300,
        "mime_type": "image/png",
        "source_url": "https://example.com/wp-content/uploads/2019/01/my-icon.png"
      }
    },
    "image_meta": {
      "aperture": "0",
      "credit": "",
      "camera": "",
      "caption": "",
      "created_timestamp": "0",
      "copyright": "",
      "focal_length": "0",
      "iso": "0",
      "shutter_speed": "0",
      "title": "",
      "orientation": "0"
    }
  },
  "post": null,
  "source_url": "https://example.com/wp-content/uploads/2019/01/my-icon.png",
  "_links": {
    "self": [
      {
        "attributes": [],
        "href": "https://example.com/wp-json/wp/v2/media/546"
      }
    ],
    "collection": [
      {
        "attributes": [],
        "href": "https://example.com/wp-json/wp/v2/media"
      }
    ],
    "about": [
      {
        "attributes": [],
        "href": "https://example.com/wp-json/wp/v2/types/attachment"
      }
    ],
    "author": [
      {
        "attributes": {
          "embeddable": true
        },
        "href": "https://example.com/wp-json/wp/v2/users/1"
      }
    ],
    "replies": [
      {
        "attributes": {
          "embeddable": true
        },
        "href": "https://example.com/wp-json/wp/v2/comments?post=546"
      }
    ]
  }
}

SO网友:sMyles

您可以创建自己的AJAX操作来处理此问题:

add_action( \'wp_ajax_get_attachment_src_details\', \'smyles_get_attachment_src_details\' );

function smyles_get_attachment_src_details() {

    check_ajax_referer( \'smyles_get_attachment_src_details\', \'smyles_get_attachment_src_details\' );
    $user_id = get_current_user_id();

    if ( empty( $user_id ) ) {
        wp_send_json_error( array( \'not_logged_in\' => \'User is not logged in\' ) );
        return;
    }

    $attach_id = absint( $_POST[\'attachment_id\'] );
    $size = array_key_exists( \'size\', $_POST ) ? sanitize_text_field( $_POST[\'size\'] ) : \'thumbnail\';

    if( $source = wp_get_attachment_image_src( $attach_id, $size ) ){
        wp_send_json_success( $source );
    } else {
        wp_send_json_error();
    }
}
如果您不在乎用户是否登录,可以删除该代码,但仍应保留nonce处理(始终将安全性放在首位!)因为这样可以防止外部调用(不是从您的站点)到您的端点

返回值将是JSON,带有-url、width、height、is\\u intermediate

相关推荐

从“漂亮的分类过滤器”中获取术语集成到“AJAX Load More”中

我正在尝试将BTF与Ajax Load More插件集成,但在使用两种不同分类法的筛选结果上遇到了问题。基本上,我只需要知道如何从两种分类法中查询/调用这两个术语。两种分类法的结果示例:https://development-client-server.com/lily/grant/grants/1999/grant-type/discretionary-grants/一种分类法的结果示例:https://development-client-server.com/lily/grants/1997/Aja