My image URLs aren't coming through properly via WPGraphQL. They’re fine in the REST API though. But this is a big problem for anyone using WordPress headlessly with WPGraphQL, which is a pretty popular and widely used plugin for implementing graphql. When I downgrade the plugin to version 2.7.6 they come through as expected.
I see two similar issues reported here.
https://www.higithub.com/wp-graphql/issue/wp-graphql/2192
#670
I’ve got a post with an image inserted into the content via the image block. I’ve also got an image being added through an ACF image field. The same thing is happening with both.
Version 3.0.1 WPGraphQL output:
https://ibb.co/D1TkR6g
Version 2.7.6 WPGraphQL output:
https://ibb.co/Z80w3dC
Version 3.0.1 REST API output for the post:
https://ibb.co/JcmNzX9
Version 3.0.1 REST API output for the ACF image:
https://ibb.co/nb2PWpp
You’ll probably ask for the system report, so here they are for both versions.
System report when version 2.7.6 is installed:
{ "system_status": { "home": "https://wordpress-321502-2425626.cloudwaysapps.com", "wordpress": "5.9", "php": "7.4.27", "php_extensions": [ "Core", "date", "libxml", "openssl", "pcre", "zlib", "filter", "hash", "Reflection", "SPL", "session", "standard", "sodium", "cgi-fcgi", "mysqlnd", "PDO", "xml", "apcu", "bcmath", "bz2", "calendar", "ctype", "curl", "dba", "dom", "enchant", "mbstring", "FFI", "fileinfo", "ftp", "gd", "gettext", "gmp", "iconv", "igbinary", "imagick", "imap", "intl", "json", "exif", "mongodb", "msgpack", "mysqli", "odbc", "pdo_dblib", "PDO_Firebird", "pdo_mysql", "PDO_ODBC", "pdo_pgsql", "pdo_sqlite", "pgsql", "apc", "posix", "readline", "redis", "shmop", "SimpleXML", "soap", "sockets", "sqlite3", "sysvmsg", "sysvsem", "sysvshm", "tidy", "tokenizer", "xmlreader", "xmlrpc", "xmlwriter", "xsl", "zip", "Phar", "memcached", "Zend OPcache" ] }, "theme_status": { "name": "Twenty Twenty-One", "version": "1.4", "author": "the WordPress team", "author_url": "https://wordpress.org/", "child_theme": false }, "plugins_report": { "must_use": [], "plugins": [ { "Name": "Advanced Custom Fields", "PluginURI": "https://www.advancedcustomfields.com", "Version": "5.11.4", "Description": "Customize WordPress with powerful, professional and intuitive fields. <cite>By <a href=\"https://www.advancedcustomfields.com\">Delicious Brains</a>.</cite>", "Author": "<a href=\"https://www.advancedcustomfields.com\">Delicious Brains</a>", "AuthorURI": "https://www.advancedcustomfields.com", "TextDomain": "acf", "DomainPath": "/lang", "Network": false, "RequiresWP": "", "RequiresPHP": "", "UpdateURI": "", "Title": "<a href=\"https://www.advancedcustomfields.com\">Advanced Custom Fields</a>", "AuthorName": "Delicious Brains" }, { "Name": "Cloudinary", "PluginURI": "https://cloudinary.com/documentation/wordpress_integration", "Version": "STABLETAG", "Description": "With the Cloudinary plugin, you can upload and manage your media assets in the cloud, then deliver them to your users through a fast content delivery network, improving your website\u2019s loading speed and overall user experience. Apply multiple transformations and take advantage of a full digital asset management solution without leaving WordPress. <cite>By <a href=\"https://cloudinary.com/\">Cloudinary Ltd., XWP</a>.</cite>", "Author": "<a href=\"https://cloudinary.com/\">Cloudinary Ltd., XWP</a>", "AuthorURI": "https://cloudinary.com/", "TextDomain": "cloudinary", "DomainPath": "/languages", "Network": false, "RequiresWP": "", "RequiresPHP": "", "UpdateURI": "", "Title": "<a href=\"https://cloudinary.com/documentation/wordpress_integration\">Cloudinary</a>", "AuthorName": "Cloudinary Ltd., XWP" }, { "Name": "WP Gatsby", "PluginURI": "", "Version": "2.2.1", "Description": "Optimize your WordPress site to be a source for Gatsby sites. <cite>By <a href=\"https://gatsbyjs.org\">GatsbyJS, Jason Bahl, Tyler Barnes</a>.</cite>", "Author": "<a href=\"https://gatsbyjs.org\">GatsbyJS, Jason Bahl, Tyler Barnes</a>", "AuthorURI": "https://gatsbyjs.org", "TextDomain": "wp-gatsby", "DomainPath": "/languages/", "Network": false, "RequiresWP": "5.4.2", "RequiresPHP": "7.3", "UpdateURI": "", "Title": "WP Gatsby", "AuthorName": "GatsbyJS, Jason Bahl, Tyler Barnes" }, { "Name": "WPGraphQL for Advanced Custom Fields", "PluginURI": "https://wpgraphql.com/acf", "Version": "0.5.3", "Description": "Adds Advanced Custom Fields to the WPGraphQL Schema <cite>By <a href=\"https://www.wpgraphql.com\">WPGraphQL, Jason Bahl</a>.</cite>", "Author": "<a href=\"https://www.wpgraphql.com\">WPGraphQL, Jason Bahl</a>", "AuthorURI": "https://www.wpgraphql.com", "TextDomain": "wp-graphql-acf", "DomainPath": "/languages", "Network": false, "RequiresWP": "", "RequiresPHP": "7.0", "UpdateURI": "", "Title": "<a href=\"https://wpgraphql.com/acf\">WPGraphQL for Advanced Custom Fields</a>", "AuthorName": "WPGraphQL, Jason Bahl" }, { "Name": "WP GraphQL", "PluginURI": "https://github.com/wp-graphql/wp-graphql", "Version": "1.6.12", "Description": "GraphQL API for WordPress <cite>By <a href=\"http://www.wpgraphql.com\">WPGraphQL</a>.</cite>", "Author": "<a href=\"http://www.wpgraphql.com\">WPGraphQL</a>", "AuthorURI": "http://www.wpgraphql.com", "TextDomain": "wp-graphql", "DomainPath": "/languages/", "Network": false, "RequiresWP": "5.0", "RequiresPHP": "7.1", "UpdateURI": "", "Title": "<a href=\"https://github.com/wp-graphql/wp-graphql\">WP GraphQL</a>", "AuthorName": "WPGraphQL" } ] }, "config_report": { "cloudinary": [], "about": [], "usage": null, "last_usage": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-06T00:00:00Z", "transformations": { "usage": 39, "credits_usage": 0.04 }, "objects": { "usage": 69 }, "bandwidth": { "usage": 230206, "credits_usage": 0 }, "storage": { "usage": 133372880, "credits_usage": 0.12 }, "credits": { "usage": 0.16, "limit": 25, "used_percent": 0.64 }, "requests": 24, "resources": 37, "derived_resources": 32, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 }, "max_image_size": 10485760, "max_video_size": 104857600 }, "signature": "f8e69444c599d82ba96258c7ed692bd5", "version": null, "status": { "status": "ok" }, "media_display": { "image_optimization": "on", "image_format": "auto", "image_quality": "auto", "enable_breakpoints": "on", "breakpoints": "3", "bytes_step": "200", "max_width": "2048", "min_width": "800", "image_preview": "https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg", "video_player": "wp", "video_controls": "on", "video_loop": "off", "video_autoplay_mode": "off", "video_limit_bitrate": "off", "video_bitrate": "500", "video_optimization": "on", "video_format": "auto", "video_quality": "auto" }, "setup": { "enable_report": "on" }, "sync_media": { "auto_sync": "on", "cloudinary_folder": ".", "offload": "dual_full" }, "gallery": { "transition": "fade", "aspectRatio": "3:4", "navigation": "always", "zoom": true, "carouselLocation": "top", "carouselOffset": 5, "carouselStyle": "thumbnails", "displayProps": { "mode": "classic", "columns": 1 }, "indicatorProps": { "shape": "round" }, "themeProps": { "primary": "#cf2e2e", "onPrimary": "#000000", "active": "#777777" }, "zoomProps": { "type": "popup", "viewerPosition": "bottom", "trigger": "click" }, "thumbnailProps": { "width": 64, "height": 64, "navigationShape": "radius", "selectedStyle": "gradient", "selectedBorderPosition": "all", "selectedBorderWidth": 4, "mediaSymbolShape": "round" }, "cloudName": "nexvel-solutions", "container": "" } } }
System report when version 3.0.1 is installed:
{ "system_status": { "home": "https://wordpress-321502-2425626.cloudwaysapps.com", "wordpress": "5.9", "php": "7.4.27", "php_extensions": [ "Core", "date", "libxml", "openssl", "pcre", "zlib", "filter", "hash", "Reflection", "SPL", "session", "standard", "sodium", "cgi-fcgi", "mysqlnd", "PDO", "xml", "apcu", "bcmath", "bz2", "calendar", "ctype", "curl", "dba", "dom", "enchant", "mbstring", "FFI", "fileinfo", "ftp", "gd", "gettext", "gmp", "iconv", "igbinary", "imagick", "imap", "intl", "json", "exif", "mongodb", "msgpack", "mysqli", "odbc", "pdo_dblib", "PDO_Firebird", "pdo_mysql", "PDO_ODBC", "pdo_pgsql", "pdo_sqlite", "pgsql", "apc", "posix", "readline", "redis", "shmop", "SimpleXML", "soap", "sockets", "sqlite3", "sysvmsg", "sysvsem", "sysvshm", "tidy", "tokenizer", "xmlreader", "xmlrpc", "xmlwriter", "xsl", "zip", "Phar", "memcached", "Zend OPcache" ] }, "theme_status": { "name": "Twenty Twenty-One", "version": "1.4", "author": "the WordPress team", "author_url": "https://wordpress.org/", "child_theme": false }, "plugins_report": { "must_use": [], "plugins": [ { "Name": "Advanced Custom Fields", "PluginURI": "https://www.advancedcustomfields.com", "Version": "5.11.4", "Description": "Customize WordPress with powerful, professional and intuitive fields. <cite>By <a href=\"https://www.advancedcustomfields.com\">Delicious Brains</a>.</cite>", "Author": "<a href=\"https://www.advancedcustomfields.com\">Delicious Brains</a>", "AuthorURI": "https://www.advancedcustomfields.com", "TextDomain": "acf", "DomainPath": "/lang", "Network": false, "RequiresWP": "", "RequiresPHP": "", "UpdateURI": "", "Title": "<a href=\"https://www.advancedcustomfields.com\">Advanced Custom Fields</a>", "AuthorName": "Delicious Brains" }, { "Name": "Cloudinary", "PluginURI": "https://cloudinary.com/documentation/wordpress_integration", "Version": "3.0.1", "Description": "With the Cloudinary plugin, you can upload and manage your media assets in the cloud, then deliver them to your users through a fast content delivery network, improving your website\u2019s loading speed and overall user experience. Apply multiple transformations and take advantage of a full digital asset management solution without leaving WordPress. <cite>By <a href=\"https://cloudinary.com/\">Cloudinary Ltd., XWP</a>.</cite>", "Author": "<a href=\"https://cloudinary.com/\">Cloudinary Ltd., XWP</a>", "AuthorURI": "https://cloudinary.com/", "TextDomain": "cloudinary", "DomainPath": "/languages", "Network": false, "RequiresWP": "", "RequiresPHP": "", "UpdateURI": "", "Title": "<a href=\"https://cloudinary.com/documentation/wordpress_integration\">Cloudinary</a>", "AuthorName": "Cloudinary Ltd., XWP" }, { "Name": "WP Gatsby", "PluginURI": "", "Version": "2.2.1", "Description": "Optimize your WordPress site to be a source for Gatsby sites. <cite>By <a href=\"https://gatsbyjs.org\">GatsbyJS, Jason Bahl, Tyler Barnes</a>.</cite>", "Author": "<a href=\"https://gatsbyjs.org\">GatsbyJS, Jason Bahl, Tyler Barnes</a>", "AuthorURI": "https://gatsbyjs.org", "TextDomain": "wp-gatsby", "DomainPath": "/languages/", "Network": false, "RequiresWP": "5.4.2", "RequiresPHP": "7.3", "UpdateURI": "", "Title": "WP Gatsby", "AuthorName": "GatsbyJS, Jason Bahl, Tyler Barnes" }, { "Name": "WPGraphQL for Advanced Custom Fields", "PluginURI": "https://wpgraphql.com/acf", "Version": "0.5.3", "Description": "Adds Advanced Custom Fields to the WPGraphQL Schema <cite>By <a href=\"https://www.wpgraphql.com\">WPGraphQL, Jason Bahl</a>.</cite>", "Author": "<a href=\"https://www.wpgraphql.com\">WPGraphQL, Jason Bahl</a>", "AuthorURI": "https://www.wpgraphql.com", "TextDomain": "wp-graphql-acf", "DomainPath": "/languages", "Network": false, "RequiresWP": "", "RequiresPHP": "7.0", "UpdateURI": "", "Title": "<a href=\"https://wpgraphql.com/acf\">WPGraphQL for Advanced Custom Fields</a>", "AuthorName": "WPGraphQL, Jason Bahl" }, { "Name": "WP GraphQL", "PluginURI": "https://github.com/wp-graphql/wp-graphql", "Version": "1.6.12", "Description": "GraphQL API for WordPress <cite>By <a href=\"http://www.wpgraphql.com\">WPGraphQL</a>.</cite>", "Author": "<a href=\"http://www.wpgraphql.com\">WPGraphQL</a>", "AuthorURI": "http://www.wpgraphql.com", "TextDomain": "wp-graphql", "DomainPath": "/languages/", "Network": false, "RequiresWP": "5.0", "RequiresPHP": "7.1", "UpdateURI": "", "Title": "<a href=\"https://github.com/wp-graphql/wp-graphql\">WP GraphQL</a>", "AuthorName": "WPGraphQL" } ] }, "config_report": { "cloudinary_usage": "", "cloudinary_last_usage": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-06T00:00:00Z", "transformations": { "usage": 48, "credits_usage": 0.05 }, "objects": { "usage": 78 }, "bandwidth": { "usage": 243372, "credits_usage": 0 }, "storage": { "usage": 138440700, "credits_usage": 0.13 }, "credits": { "usage": 0.18, "limit": 25, "used_percent": 0.72 }, "requests": 28, "resources": 38, "derived_resources": 40, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 }, "max_image_size": 10485760, "max_video_size": 104857600 }, "cloudinary_connection_signature": "f8e69444c599d82ba96258c7ed692bd5", "cloudinary_settings_version": "3.0.1", "cloudinary_status": { "status": "ok" }, "cloudinary_history": { "05-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-05T00:00:00Z", "transformations": { "usage": 33, "credits_usage": 0.03 }, "objects": { "usage": 63 }, "bandwidth": { "usage": 230206, "credits_usage": 0 }, "storage": { "usage": 124655723, "credits_usage": 0.12 }, "credits": { "usage": 0.15 }, "requests": 24, "resources": 36, "derived_resources": 27, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "04-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-04T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "03-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-03T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "02-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-02T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "01-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-01T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "31-01-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-01-31T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "30-01-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-01-30T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } } }, "sync_media": { "auto_sync": "on", "cloudinary_folder": "", "offload": "dual_full" }, "site_cache": { "cache": { "enable": "off", "cld_purge_all": "", "assets": { "plugins": { "enabled": "off", "paths": { "acf": "", "cloudinary": "", "wp-gatsby": "", "wp-graphql-acf": "", "wp-graphql": "" } }, "themes": { "enabled": "off", "paths": { "twentytwentyone": "" } }, "wordpress": { "enabled": "off", "paths": { "wp_admin": "", "wp_includes": "" } }, "content": { "enabled": "off", "paths": { "wp_content": "" } } } } }, "additional_domains": { "cache_external": { "external_assets": "off", "uploadable_domains": "" } }, "media_display": { "image_optimization": "on", "image_format": "auto", "image_quality": "auto", "enable_breakpoints": "on", "breakpoints": "3", "bytes_step": "200", "max_width": "2048", "min_width": "800", "image_freeform": "", "video_player": "wp", "video_controls": "on", "video_loop": "off", "video_autoplay_mode": "off", "video_limit_bitrate": "off", "video_bitrate": "500", "video_optimization": "on", "video_format": "auto", "video_quality": "auto", "video_freeform": "", "svg_support": "off", "image_preview": "https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg", "video_preview": "", "use_lazy_load": "on", "lazy_threshold": "100px", "lazy_custom_color": "rgba(153,153,153,0.5)", "lazy_animate": "on", "lazy_placeholder": "blur", "lazyload_preview": "https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg", "pixel_step": 200, "dpr": "2X", "breakpoints_preview": "https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg" }, "gallery": { "transition": "fade", "aspectRatio": "3:4", "navigation": "always", "zoom": true, "carouselLocation": "top", "carouselOffset": 5, "carouselStyle": "thumbnails", "displayProps": { "mode": "classic", "columns": 1 }, "indicatorProps": { "shape": "round" }, "themeProps": { "primary": "#cf2e2e", "onPrimary": "#000000", "active": "#777777" }, "zoomProps": { "type": "popup", "viewerPosition": "bottom", "trigger": "click" }, "thumbnailProps": { "width": 64, "height": 64, "navigationShape": "radius", "selectedStyle": "gradient", "selectedBorderPosition": "all", "selectedBorderWidth": 4, "mediaSymbolShape": "round" }, "cloudName": "nexvel-solutions", "container": "", "queryParam": "AA" }, "setup": { "enable_report": "on", "reporting": { "enable_report": "on" } }, "extensions": { "media-library": "off" } } }
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
