I'm trying to fetch featured image from my published post but it seems impossible! I get an error :( that's the code:

function fetchSlideShow(){
let endpoint = "";
fetch(endpoint)
.then(e => e.json())
.then(showSlideShow);
}

function showSlideShow(data){
console.log(data);
data.forEach(showSingleSlide);   
showSlides();
}

function showSingleSlide(aSlide) {
let template = document.querySelector(".slide_template").content;
let clone = template.cloneNode(true);
console.log(aSlide);  
clone.querySelector("img").setAttribute("src", aSlide._embedded["wp:featuredmedia"] 
[0].media_details.source_url);

let SlideList = document.querySelector("#SlideList");
SlideList.appendChild(clone);
}

While going to the array I see error 401 :( and moreover: Cannot read property 'source_url' of undefined" I don't know what I'm doing wrong .. any insights? HERE ARE THE ERRORS -> 401 ON CONSOLE + PROBLEM WITH URL.:

I'm trying to fetch featured image from my published post but it seems impossible! I get an error :( that's the code:

function fetchSlideShow(){
let endpoint = "http://loreleiheckmann./wordpress/wordpress/wp-json/wp/v2/Vinyls?_embed";
fetch(endpoint)
.then(e => e.json())
.then(showSlideShow);
}

function showSlideShow(data){
console.log(data);
data.forEach(showSingleSlide);   
showSlides();
}

function showSingleSlide(aSlide) {
let template = document.querySelector(".slide_template").content;
let clone = template.cloneNode(true);
console.log(aSlide);  
clone.querySelector("img").setAttribute("src", aSlide._embedded["wp:featuredmedia"] 
[0].media_details.source_url);

let SlideList = document.querySelector("#SlideList");
SlideList.appendChild(clone);
}

While going to the array I see error 401 :( and moreover: Cannot read property 'source_url' of undefined" I don't know what I'm doing wrong .. any insights? HERE ARE THE ERRORS -> 401 ON CONSOLE + PROBLEM WITH URL.:

• javascript
• wordpress

3 Answers 3

Please try changing your url in the endpoint variable:

let endpoint = "http://loreleiheckmann./wordpress/wordpress/wp-json/wp/v2/posts?per_page=20&_embed=wp:featuredmedia

If you need more data you can add them with a ma:

wp-json/wp/v2/posts?per_page=20&_embed=wp:term,wp:featuredmedia

Post per page is optional, but I would prefer having that set.

And you should write what image size you need. That way rest api will give you the right source url:

_embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url

I think it would also be better practice if you use an ssl certificate, there are free by "Let's encrypt".

EDIT:

Your screenshot shows the rest api message:

wp:featuredmedia: Array(1)
    0:
    code: "rest_forbidden"
    data: {status: 401}
    message: "Sorry, you are not allowed to do that."

So the 401 status code means: unauthorised

Seems like you are not allowed to access the data via rest api.

There could be multiple reasons for that:

• The image is attached to an unpublished post. The post may have the status "private" or "draft", and therefore is not public available.
• Your post (and attached image) is not available for not logged in users. If there is a restriction to view your code, this also applies to rest api.
• Maybe you are using some kind of membership plugin that restricts the wp rest-api. Try deactivating all plugins if one of them affects the behaviour.
• You have added some custom code to restrict access rest api access.

If nothing works for you, you should look into your database and check the medias post_status.

I think it is working fine, but you do not have access to view the posts data. This is what the 401 error indicates.

To whom it may concern - In the end, I added image in WP by custom post type ( I gave up wp:featured media - I wasn't able to fetch it.) Afterward I added a code to JS -> b.querySelector(".img").setAttribute("src", a.acf.image.url); so it works:)

I know this is a bit old but the same issue happened to me too and I couldn't figure it out either why this was happening. Especially since there were no obvious restrictions applied, like a password or "draft" post status.

If this happens to you and the WordPress site you are dealing with uses (or used) ACF or any other custom post type plugin, read ahead.

Media files are a post of the post type attachment and thus the wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php is responsible for retrieving and delivering information about these types of posts.

Inside the WP_REST_Posts_Controller class, the function get_item_permissions_check controls whether a post can be read and this is the point where it failed.

The customer website I tried to fetch information from via the REST API used ACF (Advances Custom Fields) and created custom post types. It looked like the images I couldn't retrieve information for were uploaded using the editor for the custom post type.

The image had the status inherit and a post_parent id which pointed to a post that was still existing in the database, BUT the custom post type of that post was no longer available, because it was deleted or renamed.

This means, the image was still visible in the Media gallery. And for the normal front end user everything was fine. But when you tried to fetch information about the image via REST it failed because get_item_permissions_check couldn't resolve check_read_permission since the recursive call for the inherit post status failed at current_user_can( 'read_post', $post->ID ): The (REST) user was not allowed to read the (linked parent) post of the media file.

This also applies to requests with _embed parameters, because the request follows the same logic chain.

TL;DR

In my case, the REST request couldn't retrieve information about an image or the wpfeaturedmedia because the image was linked to a custom post type post which no longer existed.