jQuery内使用模板字面量拼接用户头像路径时图片加载失败如何解决？

问题原因 #

你使用的${变量}是ES6模板字符串的插值语法，该语法仅在**反引号（）**包裹的字符串中生效，你当前用普通单引号包裹HTML字符串，${home.user}`会被直接当作普通文本拼接在路径里，导致请求的资源路径错误，图片加载失败。

修复方案 #

方案1：使用反引号包裹字符串（推荐，ES6及以上环境支持） #

var $profilephoto = $(`<img class="profile-photo" src="assets/img/${home.user}.png">`);

方案2：普通字符串拼接（兼容不支持ES6的旧环境） #

var $profilephoto = $('<img class="profile-photo" src="assets/img/' + home.user + '.png">');

额外排查建议 #

如果修改后仍存在图片加载失败的问题，可按以下步骤排查：

• 打开浏览器开发者工具的「网络」面板，查看实际发起请求的图片路径是否和预期一致
• 打印home.user的取值，确认变量值为预期的用户名，不存在取值错误、为空等异常情况

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