What about using images from your plugins directory? When using <img :src="require(path/to/image)" />, the image is moved to an 'images' folder in the plugins' root directory, but the image path is compiled to /images/image.png, which, when loaded in the wordpress plugin translates to the absolute URL www.domain.com/images/image.png - and that's incompatible with the wordpress folder structure.
I can use an absolute URL that accesses my plugins folder from the site root (ie: <img src="/wp-content/plugins/my-plugin/images/image.png" />) but I would prefer not to do that because this component needs to work with different environments and potentially different plugin names, I don't want to shackle it to one path.
I'm probably going to write a little filepath utility in here somewhere, but maybe you already have a solution for using images in your vue-wordpress plugin?
What about using images from your plugins directory? When using
<img :src="require(path/to/image)" />, the image is moved to an 'images' folder in the plugins' root directory, but the image path is compiled to/images/image.png, which, when loaded in the wordpress plugin translates to the absolute URLwww.domain.com/images/image.png- and that's incompatible with the wordpress folder structure.I can use an absolute URL that accesses my plugins folder from the site root (ie:
<img src="/wp-content/plugins/my-plugin/images/image.png" />) but I would prefer not to do that because this component needs to work with different environments and potentially different plugin names, I don't want to shackle it to one path.I'm probably going to write a little filepath utility in here somewhere, but maybe you already have a solution for using images in your vue-wordpress plugin?
For that, use the plugin_dir_url().
codex.wordpress.org/Function_Refer...
The code would be something like:
plugin_dir_url( __FILE__ ) . 'images/foo-picture.jpg';This means the plug-in can be anywhere on the site, but it will still find the 'images' directory in your plug-in folder.
Note: This is a PHP function, so if you're including it in JavaScript (Vue), allow for that.
Ex.
<img :src="<?php echo plugin_dir_url( __FILE__ ) . 'images/foo-picture.jpg'; ?>" />