javascript 使用查询选择器/模板添加图像

dgjrabp2  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(100)

我试图让一些图像显示在HTML使用查询选择器方法和DOM,但我遇到了麻烦.其余的代码似乎是做什么是应该的,但图像只是不显示.有人有任何指针?

const ol = document.querySelector("ol")
const movies = [
    {
        name: "1917",
        year: 2020,
        director: "Sam Mendes",
        image: "https://en.wikipedia.org/wiki/1917_%282019_film%29#/media/File:1917_(2019)_Film_Poster.jpeg"
    },
    {
        name: "Godzilla",
        year: 1954,
        director: "Ishirō Honda",
        image: "https://en.wikipedia.org/wiki/Godzilla_%281954_film%29#/media/File: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 (movies => `
<li>
    <p>Name: ${movies.name}</p>
    <p>Release date: ${movies.year}</p>
    <p>Director: ${movies.director}</p>
    <img src= ${movies.image}</img>
 </li>
`);

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

icnyk63a1#

您使用的图像标记不正确。请尝试此操作

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}" />
 </li>
`);

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

相关问题