title: jQuery plugin set image src relative to the plugins location
body: <p>I'm having some trouble creating a jQuery plugin that uses an image from the plugin itself.</p>
  
  <p>Let's say I have the following structure</p>
  
  <ul>
  <li>foobar
  
  <ul>
  <li>assets
  
  <ul>
  <li>images
  
  <ul>
  <li>fooBar.png</li>
  </ul></li>
  </ul></li>
  <li>js
  
  <ul>
  <li>foo_bar.js</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <hr>
  
  <p>And I created a plugin like this.</p>
  
  <pre><code>(function ($) {
    $.fn.fooBar = function () {
      let image_foo = '&lt;img id="leFoo" style="display: none" src="../assets/images/fooBar.png"/&gt;';
      $('body').append(image_foo);
    }
  });
  </code></pre>
  
  <p>The plugin is being added to the site correctly and I can call the function like this: <code>jQuery('body').fooBar();</code>. The issue is that it is trying to fetch the image from the current path. So if I was on <code>https://example.com/some/long/path/here.html</code>
  It would then try to fetch the image like so <code>https://example.com/some/long/path/assets/images/fooBar.png</code></p>
  
  <p>While the actual location could be different depending on where the library is being placed. Is there a way to dynamically fetch the path from the library location?</p>