Web stories plugin broken images issue

  • Resolved uetian78

    (@uetian78)


    3 years, 1 month ago

    I am facing issue in inserting images in web stories plugin.

    When i am creating a webstory and try to upload any image, its shows for a sec and then its shown as broken image. Also images from my media are not loading at all.

    While creating story it shows as broken but once i try to preview it, then all images are showing fine.

    I need support to resolve this issue, as i cannot create stories as images are shown broken inside stories plugin

Viewing 6 replies - 1 through 6 (of 6 total)

  • @uetian78 Hello!

    If you’ve set up a CDN for your site, you need to make sure that it has the right CORS configuration.

    Specifically, you need to set Access-Control-Allow-Originheaders on your CDN. For example: Access-Control-Allow-Origin: *

    Thread Starter uetian78

    (@uetian78)

    Thanks, I did that and solved half of the issue.

    https://prnt.sc/26ov0uu

    Now images are shown in editor slides but still cover image and brand logo are shown broken and cover image/featured images link is being inserted with cdn at the start of link.

    The featured image / Cover image is not shown even on the front end.
    https://prnt.sc/26ov1md

    And i believe all this is happenning because link to image is being inserted without CDN.
    https://prnt.sc/26ov2aw

    Kidnly support.

    @uetian78 There doesn’t appear to be an issue with the image on the front end: https://imgur.com/a/Y1xBXhb .

    Would you be able to check while in the editor if you are receiving any browser console errors?

    Thread Starter uetian78

    (@uetian78)

    The front end is working because i fixed the link manually.

    But at backend editor, still images are broken and i have checked console and there are multiple errors.

    List of Console error – https://pern-my.sharepoint.com/:u:/g/personal/hassan_8978536_talmeez_pk/EYzncpspUOFLolkImcQlR_kBPVr_COJ0E4xFWreRwlA9YQ?e=OafJgr

    Plugin Author Pascal Birchler

    (@swissspidy)

    According to the error messages CORS still does not seem to be configured fully on your CDN.

    The error message is pretty clear about that:

    Access to image at 'https://cdn.wealthycelebrity.com/wp-content/uploads/2022/01/fb-page-1-2-80x80.png' from origin 'https://wealthycelebrity.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Could you please double check your CDN CORS configuration?

    Other images apparently failed to load because of 404 errors, meaning they can’t be found because they probably no longer exist.

    Example:

    /wp-content/uploads/2022/02/cropped-image-9-1.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)

    Other messages in your log seem to indicate that you have an adblocker or similar blocking access to some stylesheets, e.g. https://cdn.mediavine.com/fonts/ProximaNova/stylesheet.css is blocked.

    And i believe all this is happenning because link to image is being inserted without CDN.

    That looks plausible.

    Here’s one of your images on the websites with proper CDN URLs: https://wealthycelebrity.com/wp-json/wp/v2/media/12891

    But here’s the one from the story where the URLs are not pointing to the CDN:
    https://wealthycelebrity.com/wp-json/wp/v2/media/12829

    What plugin/solution are you using to configure the CDN in WordPress? You might need to double check that configuration or use a different solution that properly changes the URLs all the time.

    @uetian78 We are going to mark your topic as resolved as we haven’t received a response. Please feel free to open a new support topic if you continue to experience any issues. Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Web stories plugin broken images issue’ is closed to new replies.