Question

我正在使用Django进行测验项目，其中我必须显示5个不同问题的图像，这些问题由javascript处理。但是以某种方式未显示图像：这是js文件中的代码：

    if(ques_no == 4 || ques_no == 8 || ques_no == 9 || ques_no == 13 || ques_no == 16)
{
  if(ques_no == 4)
  {
    document.getElementById("img").style.display="block";
    document.getElementById("img").style.backgroundImage="url('images/soccercity.jpg')";
  }
  if(ques_no == 8)
  {
    document.getElementById("img").style.display="block";
    document.getElementById("img").style.backgroundImage="url('images/Portugal_badge.png')";
  }
  if( ques_no == 9)
  {
    document.getElementById("img").style.display="block";
    document.getElementById("img").style.backgroundImage="url('images/Ragnar-Klavan.jpeg')";
  }
  if(ques_no == 13)
  {
    document.getElementById("img").style.display="block";
    document.getElementById("img").style.backgroundImage="url('images/rcd.png')";
  }
  if(ques_no == 16)
  {
    document.getElementById("img").style.display="block";
    document.getElementById("img").style.backgroundImage="url('images/zakumi.png')";
  }

这是css文件的代码，可以正常工作：

.background{
 background-image: url("images/football.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 position: relative;
 min-height:100vh;
 }

尽管当我通过CSS显示图像时，它可以很好地工作，但不能通过js文件。也许错误在于定义URL，但是通过CSS可以正常工作，然后为什么不使用js。

图像存储在静态目录的images子目录中。 .js和.css文件存储在静态目录中。

Answer 1

它对我来说很好，这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="img" class="background">

<script type="text/javascript" src="script.js" class="background"></script>
</body>
</html>

显示块是非常多余的，在您的代码中是不必要的，但这不会引起问题。

document.getElementById("img").style.display="block";

我的JavaScript

if(ques_no == 4 || ques_no == 8 || ques_no == 9 || ques_no == 13 || ques_no == 16)
{
  if(ques_no == 4)
  {
    document.getElementById("img").style.backgroundImage="url('images/soccercity.jpg')";
  }
  else if(ques_no == 8)
  {
    document.getElementById("img").style.backgroundImage="url('images/Portugal_badge.png')";
  }
  else if( ques_no == 9)
  {
    document.getElementById("img").style.backgroundImage="url('images/Ragnar-Klavan.jpeg')";
  }
  else if(ques_no == 13)
  {
    document.getElementById("img").style.backgroundImage="url('img.jpg')";
  }
  else
  {
    document.getElementById("img").style.backgroundImage="url('images/zakumi.png')";
  }
}

希望它会有所帮助：）

通过javascript显示图像

1 个答案: