title: How to display the asset url path of an image within jQuery code in Shopify
body: <p>I'm trying to retrieve an image from my assets folder dynamically. The process of my code is that when the element is clicked, its parent element will change background according to the name  passed by the child elements ID. Please see my code below:</p>
  
  <pre><code>$(".flex-item").click(function () {
    // add class to div while removing it from others with same class
    $(".flex-item").removeClass("expand").addClass("vertical"); //declare the class of the element, remove expand class from all
    $(this).addClass("expand").removeClass("vertical"); //add class to clicked element
    var changebackground = $(this).attr('id'); //get id of clicked element
    $("#vaq-key-features-img").css({
      "background-image": "url({{ '"+changebackground+".jpg' | asset_url }})", 
    }); 
  });
  </code></pre>
  
  <p>I have renamed my theme.js to theme.js.liquid. The url is being returned but the jquery variable is being read as a string and not displaying its value. See  below:</p>
  
  <pre><code>&lt;div class="container" id="vaq-key-features-img" style="background-image: url(https://cdn.shopify.com/s/files/1/1392/6087/t/3/assets/%22+changebackground+%22.jpg?8438893007511141278);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Is there something I'm missing?</p>