Cloudinary使用fetch参数叠加远程媒体失败，图片无法正常显示

问题根因 #

• :type=>"fetch"参数放置位置错误，你将它单独作为转换步骤放在transformation数组中，不会作用于叠加层配置，该参数是叠加层对象的专属属性，需要写入对应overlay的哈希结构内才会生效
• 不需要手动对远程图片URL做Base64编码，Cloudinary的Ruby SDK会自动处理合规的overlay参数
• 你代码中声明的基础资源是ogp.png，但最终生成的URL里基础资源是拼写错误的sampple.jpg，注意和你实际要操作的基础资源ID对齐

正确写法示例 #

<%= cl_image_tag(
  "sample.jpg", # 替换为你实际的基础资源ID
  :transformation=>[
    # 文字叠加层，原有写法可保留
    {:color=> '#fff', :overlay=>{:color=> "#ffffff", :font_family => 'Open Sans', :font_size=> 20, :text_align=> 'center', :text=> @channel.user.name},},
    {:flags=>"layer_apply", :gravity=>"north", :y=>90},
    # 远程fetch叠加层正确配置
    {:overlay=>{:url => 'https://[PUBLIC IMAGE URL].jpg', :type => "fetch"}},
    # 如有调整叠加层位置、尺寸的需求，可追加下方配置
    {:flags=>"layer_apply", :gravity=>"center", :width=>200, :height=>200}
  ]
) %>

额外校验点 #

• 确认你的Cloudinary账号已开启fetch远程资源权限，且在安全配置中添加了对应远程图片域名的白名单，未在白名单内的域名资源会加载失败
• 配置生效后生成的URL中，叠加层部分的格式应为l_fetch:XXX，可通过该特征判断配置是否被正确解析

内容的提问来源于stack exchange，提问作者k10a