Question

我试图动态地从我的资源文件夹中检索图像。我的代码的过程是，当单击元素时，其父元素将根据子元素ID传递的名称更改背景。请参阅下面的代码：

<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);"></div>

我已将theme.js重命名为theme.js.liquid。正在返回url，但jquery变量被读取为字符串而不显示其值。见下文：

fileList = new Array();
$("#fm-dropzone").dropzone({
  url: siteurl, 
  addRemoveLinks: true, 
  dictRemoveFileConfirmation: "Are you sure you want to remove this File?",     
  success: function(file, serverFileName) {
             fileList[file.name] = {"fid" : serverFileName };
           },
  removedfile: function(file) {
            $.post(siteurl + "/removeFile", fid:fileList[file.name].fid}).done(function() {
                    file.previewElement.remove();
                }); 
           }
});

我有什么遗失的吗？

Answer 1

尝试这样的事情

$("#vaq-key-features-img").css({
  "background-image": `url("${changebackground}.jpg" | ${asset_url})`, 
});

我使用了ES6 template literal。

如果您使用ES6不支持的旧浏览器，请尝试

var bgurl = "url('" + changebackground + ".jpg')";
$("#vaq-key-features-img").css({
  "background-image": bgurl, 
});

希望这会对你有所帮助。

Answer 2

我在Shopify论坛中发现了一个话题，谈论在液体过滤器中传递一个变量，并发现由于liquid filters是服务器端语言而无法实现。我使用jQuery attr();处理了我的代码。我在may parent容器中添加了一个数据属性，它将保存由子div传递的id-name。

$(".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 databg = $(this).attr('id'); //get id of clicked element
    $("#vaq-key-features-img").attr('data-bg', databg ); //pass id as data to container
});

选择具有特定数据的div并使用css属性选择器更改背景：

div[data-bg="key-feature-01"]{
    background-image:url('images/key-feature-01.jpg') !important;
}
div[data-bg="key-feature-02"]{
    background-image:url('images/key-feature-02.jpg') !important;
}
div[data-bg="key-feature-03"]{
    background-image:url('key-feature-03.jpg') !important;
}
div[data-bg="key-feature-04"]{
    background-image:url('key-feature-04.jpg') !important;
}
div[data-bg="key-feature-05"]{
    background-image:url('key-feature-05.jpg') !important;
}
div[data-bg="key-feature-06"]{
    background-image:url('key-feature-06.jpg') !important;
}

由于css文件和图像存储在同一Shopify资产文件夹中，因此不再需要使用液体过滤器指定路径。

如何在Shopify中的jQuery代码中显示图像的资产URL路径

2 个答案: