Hi Lisa,
I need an help regarding this enqueue problem.
I have 3 folders in my dist folder after build vue app. 1)js 2)css 3)img . I have successfully enqueued the scripts and styles in my wordpress plugin by using wp_enqueue_script & wp_enqueue_style.
The problem that I'm facing is that I am not able to add/enqueue the 3 folder of img in which I have my image assets that are being used for plugin.
Let's make it simple, generate a default simple vue app and run in wordpress. After enqueue, it'll give js and css but it'll not show the vue image(logo) .
I assume you're setting this up as a plugin. If so, you can reference your images through the plugin url. developer.wordpress.org/reference/...
That will give you the path to images.
Hope this helps.
Hi,
Thanks for your reply. I have tried this already and it didn't work for me. Also, I had tried by changing paths and folders but nothing seems to work in case of images.
These line of codes are working perfectly with js and css of vue app.
I tried for image source like this but it's not working at all.
plugins_url( 'dist/img/logo.png', dirname(FILE) );
plugins_url( 'dist/img/logo.png', (FILE) );
The issue could be where your /img/logo.png file is in Vue.
As I understand it, the dist folder is a compilation of .js, .css files compiled by Webpack .
Webpack ignores image files and won't compile or put them in the /dist/ folder.
Bottom Line: Your image folder may not be landing in the WP plugin file.
Try putting your image folder under the public folder (/public/img/logo.png) and tinker around with the path until it works.
To test, compile, upload to WP and check the plugin directory to see if the file is there.
If it's there, but not showing up -- that means it's uploaded, you just need to adjust the path to it.
Hopefully that gets you going the right direction.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Lisa,
I need an help regarding this enqueue problem.
I have 3 folders in my dist folder after build vue app. 1)js 2)css 3)img . I have successfully enqueued the scripts and styles in my wordpress plugin by using wp_enqueue_script & wp_enqueue_style.
The problem that I'm facing is that I am not able to add/enqueue the 3 folder of img in which I have my image assets that are being used for plugin.
Let's make it simple, generate a default simple vue app and run in wordpress. After enqueue, it'll give js and css but it'll not show the vue image(logo) .
I assume you're setting this up as a plugin. If so, you can reference your images through the plugin url.
developer.wordpress.org/reference/...
That will give you the path to images.
Hope this helps.
Hi,
Thanks for your reply. I have tried this already and it didn't work for me. Also, I had tried by changing paths and folders but nothing seems to work in case of images.
These line of codes are working perfectly with js and css of vue app.
wp_register_script('wpvue_vuejs', plugin_dir_url( FILE ).'dist/js/app.js', [], '1.0.0', true);
wp_register_script('wpvue_vuejs1', plugin_dir_url( FILE ).'dist/js/chunk-vendors.js', true);
wp_enqueue_script('wpvue_vuejs');
wp_enqueue_script('wpvue_vuejs1');
wp_enqueue_style('wpvue_css1', plugin_dir_url( FILE ).'dist/css/app.css', true);
I tried for image source like this but it's not working at all.
plugins_url( 'dist/img/logo.png', dirname(FILE) );
plugins_url( 'dist/img/logo.png', (FILE) );
FILE
The issue could be where your /img/logo.png file is in Vue.
As I understand it, the dist folder is a compilation of .js, .css files compiled by Webpack .
Webpack ignores image files and won't compile or put them in the /dist/ folder.
Bottom Line: Your image folder may not be landing in the WP plugin file.
The way around that is a 'public' folder.
see: cli.vuejs.org/guide/html-and-stati...
Try putting your image folder under the public folder (/public/img/logo.png) and tinker around with the path until it works.
To test, compile, upload to WP and check the plugin directory to see if the file is there.
If it's there, but not showing up -- that means it's uploaded, you just need to adjust the path to it.
Hopefully that gets you going the right direction.