如何在BigCommerce主题文件中调用WebDev图片并配置动态CDN？

问题说明 #

• 静态CDN链接调用WebDev文件管理器content目录下的图片可正常显示：

  <img src="https://cdn11.bigcommerce.com/s-xw5rimf0vt/content/carousel/1920x600-3.jpg" width="1920" height="600">
  

• 使用{{cdn 'content/carousel/1920x600-3.jpg'}}动态语法调用content目录图片时失败，但调用主题assets目录图片（{{cdn 'assets/carousel/1920x600-3.jpg'}}）可正常工作。

解决步骤 #

1. 指定存储桶类型调用content目录资源
   {{cdn}}助手默认优先指向主题资产目录，调用店铺级content目录文件时，需明确添加store_hash参数：

<img src="{{cdn 'content/carousel/1920x600-3.jpg' store_hash='s-xw5rimf0vt'}}" width="1920" height="600">

其中store_hash为静态链接中s-后的店铺专属哈希值。

2. 校验文件路径准确性

• 确认WebDev文件管理器内图片路径为content/carousel/1920x600-3.jpg，路径大小写、文件名后缀需完全匹配（BigCommerce路径区分大小写）。
• 排查路径是否存在多余斜杠、空格等无效字符。

3. 清除主题缓存
   修改模板后进入店铺后台：Storefront → My Themes → 当前主题的Advanced Settings → Clear Cache，刷新前端页面测试。

4. 备选：用店铺变量拼接CDN链接
   若{{cdn}}助手仍无法解析，可通过内置变量自动拼接完整地址：

<img src="{{settings.store_cdn_url}}/content/carousel/1920x600-3.jpg" width="1920" height="600">

{{settings.store_cdn_url}}会自动输出店铺CDN根地址，无需手动填写哈希值。

内容的提问来源于stack exchange，提问作者Chintan Patel - Riseotech Pvt.