如何使用本地文件在香草JavaScript中添加图片？

Question

I'm very new to coding and we have just started javascript(vanilla). Currently we are working on a word guessing game and I'm trying to have images as clues. These images would be attached to the word and its location on the index. I've researched the web but I'm confused by the various different ways to do this. I've tried a few but I can't seem to get the image to link to my assets folder where the image is located.

alert("Guess the video game!")
var totalGuesses = 9; //total number of guesses
var words = ["SuperMario64", "GoldenEye", "Contra", "StreetFighter", 
"MarioKart", "MortalKombat", "StarFox"];
console.log(words);
var userGuess = [] //keystrokes guessed
var guessesLeft = 0; //amount of guesses left
var wordsGuessed = [] //word being guessed
var computerChoices;
var wins = 0;
var losses = 0;
var mario = document.createElement("img");
mario.setAttribute("src" , "assets/images/Mario.jpg");



userGuess = [];
wordsGuessed = [];

document.onkeyup = function (event) {
alert("Press any key to start")
wordsGuess = String.fromCharCode(event.keyCode);
userGuess = event.key;
//generate random choice of words

Computerchoice = words[0] //Math.(Math.random() * (words.length));

if (computerChoices == words[0]) {
    var mario = document.createElement("img");
    mario.setAttribute(src='assets/images/Mario.jpg');
    document.getElementById("clue").append(mario);

}

}

Answer 1

The only problem is the second time you are setting the src attribute of the img element:

mario.setAttribute(src='assets/images/Mario.jpg');

This is invalid JavaScript. Changing it to this (which is already in your code - keep using techniques consistently) fixes your problem:

mario.setAttribute("src", "assets/images/Mario.jpg");

Answer 2

You can simply set like this:

var mario = document.createElement("img");
mario.src = "assets/images/Mario.jpg";