通过JS将图像插入html时出现问题



在pycharm中显示脚本或转换到所选浏览器时遇到问题。我看了教练的视频,但我想我错过了什么。有人能检查一下我的代码,看看你能不能找到我缺少的东西?我想插入图片,用正确的信息来剪辑电影,但无法正常工作。谢谢你的任何帮助。

//更新//我确实让这张照片发挥了作用,现在出现了,把其中一张放错了地方";。尽管在调用js文件中的图像时仍然遇到问题,这样我就可以正确地组织它。有没有更好的方法可以做到这一点,也许在html中使用它作为正文的一部分,或者以其他方式?

///更新2///所以我很难将特定的图像与";电影;并且不确定最好的方法应该是什么。有没有一种方法可以在.js文件中创建部分,并调用单个片段并将图像放在它们之间,或者我可以将图像本身插入.js文件的部分之间?

//Movie 1
var movie_1={
name: "Princess Mononoke",
genre: "Fantasy/Adventure",
year: "1997",
actor: "Billy Crudup as Ashitaka",
actress: "Claire Danes as San"
};
//image things
//function addTheImage() {
//    var img = document.createElement("img");
//    img.src = "img/Princess_Mononoke_Japanese_poster.png";
//    var src = document.getElementById("x");
//    src.appendChild(img);
//}
//function show_image(src, width, height, alt) {
//    var img = document.createElement("img");
//    img.src = "img/Princess_Mononoke_Japanese_poster.png";
//    img.width = 200;
//    img.height = 300;
//    img.alt = alt;
// This next line will just add it to the <body> tag
//    document.body.appendChild(img);
//}
// document.write(<img src="Module_10/img/Princess_Mononoke_Japanese_poster.png">)
//screen stuff
document.write("<b><font size = 6>");
document.write("The movie's title is " + movie_1.name);
document.write("</b></font size>");
document.write("<br>");
document.write("<br>");

//Genre
document.write("<font size = 4>");
document.write("The movie's genre is mostly " + movie_1.genre);
document.write("</font size>");
document.write("<br><br>");
//Actors
document.write("<font size = 4>");
document.write("The two main cast members consists of " + movie_1.actor + " and " + movie_1.actress);
document.write("</font size>")
document.write("<br>")
document.getElementById("x")
document.write("<br><br><br>")

////Movie 2////
var movie_2={
name: "Attack The Block",
genre: "Sci-fi/Action",
year: "2011",
actor: "John Boyega as Moses",
actress: "Jodie Whittaker as Sam"
};
//image things
//function addTheImage() {
//    var img = document.createElement("img");
//    img.src = "img/attack_block.jpg";
//    var src = document.getElementById("x");
//    src.appendChild(img);
//}
//function show_image(src, width, height, alt) {
//    var img = document.createElement("img");
//    img.src = "img/attack_block.jpg";
//    img.width = 200;
//    img.height = 300;
//    img.alt = alt;
// This next line will just add it to the <body> tag
//    document.body.appendChild(img);
//}
// document.write(<img src="Module_10/img/attack_block.jpg">)

//screen stuff
document.write("<b><font size = 6>");
document.write("The movie's title is " + movie_2.name);
document.write("</b></font size>");
document.write("<br>");
document.write("<br>");

//Genre
document.write("<font size = 4>");
document.write("The movie's genre is mostly " + movie_2.genre);
document.write("</font size>");
document.write("<br><br>");
//Actors
document.write("<font size = 4>");
document.write("The two main cast members consists of " + movie_2.actor + " and " + movie_2.actress);
document.write("</font size>")
document.write("<br>")
document.getElementById("x")
document.write("<br><br><br>")

////Movie 3////
var movie_3={
name: "The Old Guard",
genre: "Action/Fantasy",
year: "2020",
actor: "Chaarlize Theron as Andy",
actress: "Harry Melling as Steven Merrick"
};
//image things
//function addTheImage() {
//    var img = document.createElement("img");
//    img.src = "img/attack_block.jpg";
//    var src = document.getElementById("x");
//    src.appendChild(img);
//}
//function show_image(src, width, height, alt) {
//    var img = document.createElement("img");
//    img.src = "img/attack_block.jpg";
//    img.width = 200;
//    img.height = 300;
//    img.alt = alt;
// This next line will just add it to the <body> tag
//    document.body.appendChild(img);
//}
// document.write(<img src="Module_10/img/attack_block.jpg">)

//screen stuff
document.write("<b><font size = 6>");
document.write("The movie's title is " + movie_3.name);
document.write("</b></font size>");
document.write("<br>");
document.write("<br>");

//Genre
document.write("<font size = 4>");
document.write("The movie's genre is mostly " + movie_3.genre);
document.write("</font size>");
document.write("<br><br>");
//Actors
document.write("<font size = 4>");
document.write("The two main cast members consists of " + movie_3.actor + " and " + movie_3.actress);
document.write("</font size>")
document.write("<br>")
document.getElementById("x")
document.write("<br><br><br>")


//image things
//function addTheImage() {
//    var img = document.createElement("img");
//    img.src = "img/Princess_Mononoke_Japanese_poster.png";
//    var src = document.getElementById("x");
//    src.appendChild(img);
//}
//function show_image(src, width, height, alt) {
//    var img = document.createElement("img");
//    img.src = "img/Princess_Mononoke_Japanese_poster.png";
//    img.width = 200;
//    img.height = 300;
//    img.alt = alt;
// This next line will just add it to the <body> tag
//    document.body.appendChild(img);
//}

////MotoGp QATAR////
//The things
var motogp_1 = new Pilot("Bastianini ","Enea",24,"Ducati",25,"Losail Circuit, QATAR Grand Prix");
var motogp_2 = new Pilot("Binder","Brad", 26,"KTM",20,"Losail Circuit, QATAR Grand Prix");
var motogp_3 = new Pilot("Espargaro","Pol", 30,"Honda",16,"Losail Circuit, QATAR Grand Prix");
//Functions and things for MotoGP
function Pilot(first,last,age,team,points,track){
this.firstName = first;
this.lastname = last;
this.age = age;
this.team = team;
this.finalpoints = points;
this.trackname = track;
}
////To screen
document.write("<b><font size = 6>");
document.write("MotoGP QATAR Race Results for 3/28/2021");
document.write("</b></font size>");
document.write("<br>");
document.write("<br>");
document.write("<font size = 4>");
document.write(motogp_1.firstName + " " + motogp_1.lastname + ": "+ motogp_1.team +", "+ motogp_1.finalpoints +" at "+ motogp_1.trackname);
document.write("<br><br>");
document.write(motogp_2.firstName + " " + motogp_2.lastname + ": "+ motogp_2.team +", "+ motogp_2.finalpoints +" at "+ motogp_2.trackname);
document.write("<br><br>");
document.write(motogp_3.firstName + " " + motogp_3.lastname + ": "+ motogp_3.team +", "+ motogp_3.finalpoints +" at "+ motogp_3.trackname);
document.write("<br><br>");
document.write("</font size>");

////MotoGp Indonesia////
//The things
var indo_1 = new Pilot("Oliveria ","M",24,"KTM",25,"Mandalika International Street Circuit");
var indo_2 = new Pilot("Quartararo","F", 26,"Yamaha",20,"Mandalika International Street Circuit");
var indo_3 = new Pilot("Zarco","J", 30,"Ducati",16,"Mandalika International Street Circuit");
//Functions and things for MotoGP
function Pilot(first,last,age,team,points,track){
this.firstName = first;
this.lastname = last;
this.age = age;
this.team = team;
this.finalpoints = points;
this.trackname = track;
}
////To screen
document.write("<b><font size = 6>");
document.write("MotoGP Indonesia Race Results for 3/28/2021");
document.write("</b></font size>");
document.write("<br>");
document.write("<br>");
document.write("<font size = 4>");
document.write(indo_1.firstName + " " + indo_1.lastname + ": "+ indo_1.team +", "+ indo_1.finalpoints +" at "+ indo_1.trackname);
document.write("<br><br>");
document.write(indo_2.firstName + " " + indo_2.lastname + ": "+ indo_2.team +", "+ indo_2.finalpoints +" at "+ indo_2.trackname);
document.write("<br><br>");
document.write(indo_3.firstName + " " + indo_3.lastname + ": "+ indo_3.team +", "+ indo_3.finalpoints +" at "+ indo_3.trackname);
document.write("<br><br>");
document.write("</font size>");
<html>
<title>Objects</title>
<head>
<script src="JS/image_test.js"></script>
<script src="JS/movies.js"></script>
</head>
<body>
<!--        <img src="img/Princess_Mononoke_Japanese_poster.png" hegiht="300" widht="200">-->
<!--    <div id="header"></div>-->

</script>
</body>
<head>
<script src="JS/moto.js"></script>
</head>
<body>
</body>
</html>

在您的img中,src是一个"img和Princess之间。。。删除它,它应该工作

最新更新