Twine Sugarcube开发下jQuery脚本内嵌图片不显示问题求助

问题根因 #

1. 邮件展开后gif不显示：你现有脚本提取邮件内容时使用了.text()方法，该方法只会提取纯文本，会直接丢弃所有HTML标签（包括你的<img>标签），因此扩展消息区自然无法加载gif。
2. 之前append插入图片出现在所有卡片：你没有限定选择器的作用范围，全局选中了所有.EmailPreview元素，导致所有卡片都被插入了图片。

修复方案 #

1. 先修正HTML语法错误：第一个邮件的用户头像标签缺少闭合双引号，将<img src="Images/Phone Icons/User.png> 修改为 <img src="Images/Phone Icons/User.png">，避免该头像加载异常。
2. 修改脚本内的内容提取逻辑，将.text()替换为.html()，完整保留内容里的HTML标签结构：

<<done>>
    <<script>>
        $(".Email").on("click", function() {
            $(this).addClass("active");
            $(".Email").not(".active").addClass("deactive");
            $(".ExtendMsg").addClass("active");
            // 把原来的.text()换成.html()即可保留img标签
            $(".ExtendMsg").html($('<div />').html($(".EmailPreview", this).html()));
            $(".headerLabel h1").text("MESSAGES");
        });
        $(".hamburgerWrapper").on("click", function() {
            $(".Email.active").removeClass("active");
            $(".Email.deactive").removeClass("deactive");
            $(".ExtendMsg").removeClass("active");
            $(".headerLabel h1").text("MESSAGES");
        });
    <</script>> 
<</done>>

3. 如果需要给该gif单独设置样式，直接给img标签添加自定义类名即可，无需修改脚本逻辑，示例：

<img class="inline-attachment-gif" src="Images/Attachments/Shining.gif">

后续直接在样式表中针对.inline-attachment-gif编写对应样式即可。

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