Include image assets in a WordPress Gutenberg Block Plugin - wordpress

Question

I am creating a custom WordPress Gutenberg block and I want to use image assets (PNGs, JPGs) from my plugin folder, to be shown in both the Gutenberg editor and on the rendered page.
I am using Webpack to bundle my files for JS and SCSS. I tried adding the webpack image loader, which saves images into an 'assets' folder in my main plugin directory.
However, when I try to use my image assets from my Block's main JS file, I cannot find a way to access the full URL path of my images as running on my WordPress server, currently running in a docker container on localhost.
My hope was to find a WordPress method to return the path of my plugin directory, and use that to point to the image assets regardless of how they are bundled, but I have not been able to find a solution in the documentation.
It's possible to get the plugin directory using PHP using WordPress' built-in function:
function _get_plugin_directory() {
return __DIR__;
}
This seems like it could help, however I do not know if it's possible to pass the returned plugin path into my JS file.
My plugin structure looks like this:
/assets // generated by Webpack
- image.png
- main.js
/blocks
/block-example
- image.png // <-- My image asset
- index.js // <-- I want to use image.png here
- index.js // loads in my block
blocks.php
The index.js file is where I want to show the image, using the standard WordPress edit and save functions:
import image from './image.png';
edit: props => {
...
<img src={image} />
}
In the WordPress Gutenberg editor, images point to just the image file name (./image.png or assets/image.png etc), instead of the full path of the image where it sits inside the plugin directory (ie localhost:8080/plugins/my-blocks/assets/image.png) which results in the image not being found.

Answer 1

I'm still looking into whether there's an official Gutenberg way to do this, but for now I've got this working in my plugin with wp_localize_script.
This works to pass data from PHP into enqueued Javascript so that data usually only accessible in PHP is accessible in Javascript as well.
So (likely inside blocks.php from your example), you would have something like:
wp_enqueue_script(
'my-main-script',
plugins_url( 'assets/main.js', __FILE__ ),
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-components' ),
'20190804',
true
);
You can then enqueue any values you want to pass into your JS:
wp_localize_script(
'my-main-script',
'js_data',
array(
'my_image_url' => plugins_url( 'blocks/block-example/image.png', __FILE__ )
)
);
This will ensure that the image path is accessible to javascript. Then from within your block itself, you can reference it:
<img src={js_data.my_image_url} />
You should now see your static image asset rendered within your block.

Answer 2

Popping this in here for anyone that land here:
You can directly import images into react apps using webpack.
So assuming you're using some kind of webpack configuration (#wordpress/scripts, create-guten-block, or your own custom setup), you would simply import your image into the block file like so, assuming your image is in the same folder as the file you're importing into:
import image1 from "./image1.jpg"
And then use it like a URL wherever you need:
<img src={image1} alt="my image" />

Answer 3

You can also acheive the same thing using the newer wp_add_inline_script function.
From the WordPress docs
Though localization is the primary use, it (wp_localize_script) was often used to pass generic data from PHP to JavaScript, because it was originally the only official way to do that. wp_add_inline_script() was introduced in WordPress Version 4.5, and is now the best practice for that use case. wp_localize_script() should only be used when you actually want to localize strings.
Here's the code I used to pass an image url into a custom Gutenberg block using wp_add_inline_script. The below code was placed inside blocks.php as per the example.
In wp_enqueue_script code sample, _get_plugin_url() is my own custom function to retrieve the path for my plugin.
wp_enqueue_script(
'my-main-script',
_get_plugin_url() . $block_path,
[],
filemtime( _get_plugin_directory() . $block_path )
);
I set up an array for the data I wished to pass in, eg
$js_data = array(
'image_url' => _get_plugin_url() . '/assets/images/BACK.png',
);
Then used the wp_add_inline_script function
wp_add_inline_script(
'my-main-script',
'var jsData = ' . wp_json_encode( $js_data ),
'before'
);
Inside the /block-example/index.js file which registers the block and defines its behaviour, I can access that variable like:
jsData.image_url