Plugin Javascript with Source URL’s For Images Using Wrong Directory

This is tough and would really, really love some help.

I have a plugin that has a JavaScript file with an array of sources (URL’s) that points to a “texture” directory in the plugin for images, but keep getting 404 errors, because instead of searching images in /website/wp-content/plugins/die/textures it looks for website/textures, or website/post-name/textures and never the plugin.

These work just fine on the same server as a generic html website, but WordPress is not behaving as expected. Here is the code to my plugin:

wp_register_script( 'die', plugin_dir_url( __FILE__ ) . 'includes/Die.js' ); 
wp_enqueue_script( 'die', plugin_dir_url( __FILE__ ) . 'includes/Die.js' );

My Die.js code looks like this:

export const TEXTURES = {
    'cloudy': {
        name: 'Transparent',
        source: './textures/cloudy.png'
    },

…with many more source: ‘./textures/pngs

The Die plugin directory structure looks like this:

• includes
• textures
• die.php

Any input or help would be sincerely appreciated.

Thank you.

Answer

After you enqueue your js you need to localize your your variables from php like this:

wp_localize_script( 'die', 'dievars', array('path' => plugin_dir_url(__FILE__)) );

You can access this “path” in your js as this:

export const TEXTURES = {
    'cloudy': {
        name: 'Transparent',
        source: dievars.path + 'textures/cloudy.png'
    },