如何使用Javascript在html中显示图像_Javascript_Html

如何使用Javascript在html中显示图像

javascript html

如何使用Javascript在html中显示图像,javascript,html,Javascript,Html,我试图用HTML和javascript显示小图像，但不知道为什么它不起作用： <!DOCTYPE html> <html lang="en"> <head> <title>Show the images</title> </head> <body> <div id="smallPhotos"> <ul id="smallPhotosList">

我试图用HTML和javascript显示小图像，但不知道为什么它不起作用：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Show the images</title>
</head>

<body>
    <div id="smallPhotos">
        <ul id="smallPhotosList">

        </ul>
    </div>
    <script scr="img.js"></script>
</body>
</html>


显示图像

以及javascript代码：

//img.js  
 var ul =  document.getElementById("smallPhotosList");

    for(var i = 1; i < 7; i++){
        var li = document.createElement("li");
        li.innerHTML = '<img src="photo0'+i+'.jpg" width="80" height="50">';
        ul.appendChild(li);
    }

//img.js
var ul=document.getElementById（“smallPhotosList”）；
对于（变量i=1；i<7；i++）{
var li=document.createElement（“li”）；
li.innerHTML=''；
ul.儿童（li）；
}

所有6个图像（photo01…photo06）和代码文件都在同一目录中

试试这个：

html:

<div id="your-image"></div>

试试这个：

html:

<div id="your-image"></div>

创建一个新元素并以通用方式添加其源，然后将其添加到li，然后将该li添加到ul

var ul =  document.getElementById("smallPhotosList");

    for(var i = 1; i < 7; i++){
        var elem = document.createElement("img");
        elem.src = `images${i}.jpg`;
        var li = document.createElement("li");
        li.appendChild(elem);
        ul.appendChild(li);
    }

var ul=document.getElementById（“smallPhotosList”）；
对于（变量i=1；i<7；i++）{
var elem=document.createElement（“img”）；
elem.src=`images${i}.jpg`；
var li=document.createElement（“li”）；
李.儿童（elem）；
ul.儿童（li）；
}

创建一个新元素，以通用方式添加其源代码，然后将其添加到li，然后将该li添加到ul

var ul =  document.getElementById("smallPhotosList");

    for(var i = 1; i < 7; i++){
        var elem = document.createElement("img");
        elem.src = `images${i}.jpg`;
        var li = document.createElement("li");
        li.appendChild(elem);
        ul.appendChild(li);
    }

var ul=document.getElementById（“smallPhotosList”）；
对于（变量i=1；i<7；i++）{
var elem=document.createElement（“img”）；
elem.src=`images${i}.jpg`；
var li=document.createElement（“li”）；
李.儿童（elem）；
ul.儿童（li）；
}

我正在编辑你的问题，使其成为一个片段，并立即得到了答案。我认为你的代码没有任何问题

var ul=document.getElementById（“smallPhotosList”）；
对于（变量i=1；i<7；i++）{
var li=document.createElement（“li”）；
li.innerHTML=''；
ul.儿童（li）；
}

我正在编辑你的问题，使其成为一个片段，并立即得到了答案。我认为你的代码没有任何问题

var ul=document.getElementById（“smallPhotosList”）；
对于（变量i=1；i<7；i++）{
var li=document.createElement（“li”）；
li.innerHTML=''；
ul.儿童（li）；
}

我运行您的代码，将图像保存在同一文件夹中。一切正常。检查您的图像是否正确命名为

photo01.jpg、photo02.jpg、photo03.jpg

我将图像保存在同一文件夹中运行您的代码。一切正常。检查您的图像是否正确命名为

photo01.jpg、photo02.jpg、photo03.jpg

…

代码的作用是什么？它会抛出任何错误吗？@Plastic nothing，只是一个空页没有errors@casper当然，您的图像路径是错误的。否则，您的代码可能不是最好的方法，但它很好，请参见。@UlysseBN这真的很奇怪，我肯定先检查了路径。这条路是正确的。但仍然没有表现出来，我找到了其他方式来表现它。我只是很好奇为什么这种方式在我的机器上不起作用。不确定它是否独立于环境您可能引用了嵌套资源的相对路径，而您的图像位于其他资源路径中？要调试这样一个东西，我建议移动图像或更改路径，直到其中一个给你一些东西。并从那里开始进一步调试！代码的作用是什么？它会抛出任何错误吗？@Plastic nothing，只是一个空页没有errors@casper当然，您的图像路径是错误的。否则，您的代码可能不是最好的方法，但它很好，请参见。@UlysseBN这真的很奇怪，我肯定先检查了路径。这条路是正确的。但仍然没有表现出来，我找到了其他方式来表现它。我只是很好奇为什么这种方式在我的机器上不起作用。不确定它是否独立于环境您可能引用了嵌套资源的相对路径，而您的图像位于其他资源路径中？要调试这样一个东西，我建议移动图像或更改路径，直到其中一个给你一些东西。并从那里开始进一步调试！但是，我的方法有错误吗？我只是不明白为什么它不起作用，似乎是合法的代码（nx）），但是，我的方法有错误吗？我只是不明白为什么它不起作用，似乎是合法的代码