将图像作为资产来源的正确方法 shopify答案

【问题标题】：Proper way on putting images as sources in assets shopify将图像作为资产来源的正确方法 shopify
【发布时间】：2016-11-14 12:14:13
【问题描述】：

我一直坚持在 shopify 主题之上显示自定义社交。我尝试了{{ 'icon.png' | asset_url }}，但它不会显示。相反，当我在浏览器中检查元素时，它会自动生成display: none !important; 样式。我不知道我在哪里或错过了什么。

下面是我的代码：

<div id="smash-social" class="grid__item medium-up--two-fifths text-right">
          <a href="https://www.facebook.com/link" target="_blank">
            {{ 'facebook-logo-button.png' | asset_url }}
          </a>
          <a href="https://twitter.com/link" target="_blank">
            {{ 'twitter-logo-button.png' | asset_url }}
          </a>
</div>

【问题讨论】：

嘿，@claudios...你认为你可以透露你正在使用的主题吗？ @jrbedard 下面的回答是正确的。几乎可以肯定是一些 javascript 将这些内联样式添加到您的 <img> 标记中。首先，尝试将它们从 #smash-social 元素中取出，看看它们是否仍然隐藏。
@CameronHurd，是的！确实有些不对劲。我会尝试删除它。
@CameronHurd，尝试过但没有乐趣 :(
@CameronHurd，我现在明白了！这是因为我的 adBlock Plus chrome 插件阻止了我的图像显示。呸！

标签： css shopify

【解决方案1】：

添加img_tag 过滤器以生成带有alt 属性的img HTML 元素：

{{ 'facebook-logo-button.png' | asset_url | img_tag: 'facebook' }}

【讨论】：

嗨，我也试过了，但它不会显示。当我检查元素时，它给了我这个<img src="//cdn.shopify.com/s/files/1/1363/4483/t/10/assets/facebook-logo-button.png?4918099405809607113" alt="facebook" style="display: none !important;">
嘿，我现在明白了。只是因为我的 adBlock plus chrome 插件阻止了我的图片。