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

我试图从资产文件夹中动态地检索图像。我的代码的过程是，当单击元素时，其父元素将根据子元素ID传递的名称更改背景。请参阅我的代码如下：如何在Shopify中的jQuery代码中显示图像的资产url路径

$(".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 }})", 
    }); 
});

我已将我的theme.js更名为theme.js.liquid。 url正在返回，但jquery变量正在被读为一个字符串，并没有显示它的值。见下：

<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>

有什么我失踪了吗？

来源

2017-09-25 aj noguerra

尝试这样的事情

$("#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, 
});

希望这会帮助你。

来源

2017-09-25 08:24:22 Shiladitya

谢谢@Shiladitya，您的替代解决方案正在执行，但它仍未显示Shopify资产网址的正确路径。它只是给网站的域名加图像的名称，但不是图像所在的正确路径文件夹。 '

' –

@ajnoguerra您采用了哪种解决方案？第一还是第二？什么'asset_url'包含？第二个是 – Shiladitya

。当执行'https：// www.websitename.com/key-feature-01.jpg'时，它将style属性中的此路径显示为背景，但这是错误的。 Shopify资产网址路径通常显示如下所示：//cdn.shopify.com/s/files/1/392/6087/t/3/assets/vaquform-carousel-imageboxes-01_1366x.jpg？15627163126536874031' –

我在Shopify论坛中发现了一个话题，讲述了在液体过滤器中传递一个变量，并发现这是不可能的，因为liquid filters是服务器端语言。我用我的代码通过使用jQuery attr();我的代码中添加了一个数据属性可能会父容器，它将持有由子div传递的id名称。

$(".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资源文件夹，使用液体过滤器是指定路径不再需要了。

来源

2017-09-26 11:42:00

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

回答

相关问题