Title: Generate WpGraphql Image DataUrl
Author: dipankarmaikap
Published: <strong>February 1, 2022</strong>
Last modified: February 1, 2022

---

Search plugins

![](https://ps.w.org/generate-wpgraphql-image-dataurl/assets/banner-772x250.png?
rev=2670411)

This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.

![](https://ps.w.org/generate-wpgraphql-image-dataurl/assets/icon-256x256.png?rev
=2670411)

# Generate WpGraphql Image DataUrl

 By [dipankarmaikap](https://profiles.wordpress.org/dipankarmaikap/)

[Download](https://downloads.wordpress.org/plugin/generate-wpgraphql-image-dataurl.1.0.2.zip)

 * [Details](https://wordpress.org/plugins/generate-wpgraphql-image-dataurl/#description)
 * [Reviews](https://wordpress.org/plugins/generate-wpgraphql-image-dataurl/#reviews)
 *  [Installation](https://wordpress.org/plugins/generate-wpgraphql-image-dataurl/#installation)
 * [Development](https://wordpress.org/plugins/generate-wpgraphql-image-dataurl/#developers)

 [Support](https://wordpress.org/support/plugin/generate-wpgraphql-image-dataurl/)

## Description

This plugin Generates DataUrl of MediaItem in WPGraphQL.

This is an extension to the awsome WPGraphQL plugin (https://github.com/wp-graphql/
wp-graphql) that Generate DataUrl of MediaItems.

If you are working with Headless WordPress and NextJS you can notice that NextJS
don’t offer BlurUp image like GatsbyJS by default. You have to pass a base64 dataUrl
in to make it work.
 Or you will see a blank space until the image loads. This plugin
adds a dataUrl on each media item so you can use it as a placeholder until the image
fully loads and NextJS will also create the fade/BlurUp Effect like in GatsbyJS.

**Returning DataUrl for:**

 * MediaItem

## Installation

 1. Install & activate [WPGraphQL](https://www.wpgraphql.com/)
 2. Upload the plugin to the `/wp-content/plugins/` directory
 3. [See GitHub Repo for example queries](https://github.com/dipankarmaikap/wp-graphql-image-dataurl)

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“Generate WpGraphql Image DataUrl” is open source software. The following people
have contributed to this plugin.

Contributors

 *   [ dipankarmaikap ](https://profiles.wordpress.org/dipankarmaikap/)

[Translate “Generate WpGraphql Image DataUrl” into your language.](https://translate.wordpress.org/projects/wp-plugins/generate-wpgraphql-image-dataurl)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/generate-wpgraphql-image-dataurl/),
check out the [SVN repository](https://plugins.svn.wordpress.org/generate-wpgraphql-image-dataurl/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/generate-wpgraphql-image-dataurl/)
by [RSS](https://plugins.trac.wordpress.org/log/generate-wpgraphql-image-dataurl/?limit=100&mode=stop_on_copy&format=rss).

## Meta

 *  Version **1.0.2**
 *  Last updated **4 years ago**
 *  Active installations **50+**
 *  WordPress version ** 5.0 or higher **
 *  Tested up to **5.9.13**
 *  PHP version ** 7.1 or higher **
 * Tags
 * [Decoupled WordPress](https://wordpress.org/plugins/tags/decoupled-wordpress/)
   [GraphQL](https://wordpress.org/plugins/tags/graphql/)[Headless WordPress](https://wordpress.org/plugins/tags/headless-wordpress/)
   [jamstack](https://wordpress.org/plugins/tags/jamstack/)[WpGraphQL](https://wordpress.org/plugins/tags/wpgraphql/)
 *  [Advanced View](https://wordpress.org/plugins/generate-wpgraphql-image-dataurl/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/generate-wpgraphql-image-dataurl/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/generate-wpgraphql-image-dataurl/reviews/)

## Contributors

 *   [ dipankarmaikap ](https://profiles.wordpress.org/dipankarmaikap/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/generate-wpgraphql-image-dataurl/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](https://www.buymeacoffee.com/dipankarmaikap)