ES6模板字面量中URL插入丢失//的问题排查与修复

嘿，我一眼就揪出问题所在啦——你写的img标签语法有错误，这才导致innerHTML解析时URL的双斜杠莫名丢失，虽然控制台打印的代码看起来正常，但浏览器碰到错误的HTML会自动“脑补修正”，结果就把//给弄没了。

问题根源 #

你原来的模板代码里，img标签的src属性写法犯了两个低级错误：

return ` <img src" ${ pokedex.img } "></img> `;

1. src"是完全错误的属性格式，正确的写法应该是src="（属性名+等号+引号，三者之间不能乱加空格）
2. 变量${ pokedex.img }前后的多余空格，会让生成的URL自带首尾空格，浏览器解析时会把这些空格当成URL的一部分，进而引发异常

修正后的代码 #

把语法调整成标准格式后，图片就能正常显示了：

const resultat = document.querySelector('.master-wrapper'); //结果展示容器
const html = pokedex.map(pokedex => {
  // 修正属性语法，去掉多余空格，使用标准自闭合img标签
  return `<img src="${pokedex.img}" alt="宝可梦图片">`;
}).join('');
resultat.innerHTML += html;

额外小提示 #

• img是自闭合标签，不需要写</img>，多余的闭合标签反而可能干扰浏览器的解析逻辑
• 加上alt属性不仅符合Web语义化规范，还能在图片加载失败时给用户显示替代文本，提升体验

修改后生成的HTML会是标准的<img src="https://xxx.jpg" alt="宝可梦图片">格式，浏览器就能正确识别完整URL，不会再丢失双斜杠啦！

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