使用Query Selector与Template添加图片遇问题求助

你的代码里有两个核心问题导致图片加载失败：

1. img标签语法错误 #

原代码里的img标签写法存在两处问题：

<img src= ${movies.image}</img>

• src属性的值没有用引号包裹，当URL包含#、%这类特殊字符时，浏览器会解析出错
• 标签未正确闭合，标准的自闭合写法更规范

修正后的img标签（同时加上alt属性提升可访问性）：

<img src="${movies.image}" alt="${movies.name} poster" />

2. 维基百科图片链接不是直接资源地址 #

前两个电影的image字段用的是维基百科的页面锚点链接（带#的网页链接），这类链接指向的是维基百科页面，而非图片文件本身，浏览器无法将其作为图片源加载。

你需要替换成维基百科图片的直接资源URL：

• 1917的图片链接替换为：https://upload.wikimedia.org/wikipedia/en/9/91/1917_%282019%29_Film_Poster.jpeg
• 哥斯拉的图片链接替换为：https://upload.wikimedia.org/wikipedia/en/d/d5/Gojira_1954_Japanese_poster.jpg

修复后的完整代码 #

const ol = document.querySelector("ol")
const movies = [
    {
        name: "1917",
        year: 2020,
        director: "Sam Mendes",
        image: "https://upload.wikimedia.org/wikipedia/en/9/91/1917_%282019%29_Film_Poster.jpeg"
    },
    {
        name: "Godzilla",
        year: 1954,
        director: "Ishirō Honda",
        image: "https://upload.wikimedia.org/wikipedia/en/d/d5/Gojira_1954_Japanese_poster.jpg"
    },
    {
        name: "The Thing",
        year: 1982,
        director: "John Carpenter",
        image: "https://m.media-amazon.com/images/I/91U8fI0EBdL._SL1500_.jpg"
    },
];

const template = movies.map(movie => `
<li>
    <p>Name: ${movie.name}</p>
    <p>Release date: ${movie.year}</p>
    <p>Director: ${movie.director}</p>
    <img src="${movie.image}" alt="${movie.name} poster" />
</li>
`);

ol.innerHTML = template.join('');

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