Wie referenziere ich ein Bild in Anführungszeichen in einem Skript

Question

Ich versuche, ein Bild zu verweisen, anstatt Text innerhalb des Skript-Tags in einer HTML-Seite zu verwenden. Ich versuche ein Bild für eine Schaltfläche anstelle von Text zu verwenden. Wenn die Taste gedrückt wird, ändert sich der Text "Pause" wie unten gezeigt.

pauseButton.innerHTML = "Paused"; 

Wenn diese Taste erneut gedrückt wird, erscheint die Meldung 'Pause'.

Stattdessen möchte ich ein Bild anzeigen, das ich erstellt habe. Dieser Code zeigt einen Abschnitt, in dem ich versucht habe, das Bild zu referenzieren.

pauseButton.innerHTML = "url(Images/pausebackground.png)"; 

Anstatt das Bild der Anzeige zeigt es 'url (Bilder/pausebackground.png)' in Form von Text.

Wie kann ich das Bild innerhalb der Anführungszeichen verweisen?

Answer 1

Sie müssen HTML-Code in innerHTML setzen (wie der Name schon sagt). Verwenden Sie ein <img> tag:

pauseButton.innerHTML = '<img src="Images/pausebackground.png">'; 

Answer 2

Die innerHTML Eigenschaft wird die HTML-innerhalb das Element ändern:

<div> 
    Here is the inner html. 
</div> 

Wenn Sie ein Bild auf die innere html hinzufügen möchten, können Sie ein normales Bild verwenden Tag, aber denken Sie daran, nur die Einstellung innerHTML wird alles entfernen, was bereits drin ist.

pauseButton.innerHTML = '<img src="Images/pausebackground.png" />' 

Wenn Sie das Bild als Hintergrund der Schaltfläche verwenden möchten (was ich Ihnen lieber tun würde vermuten), könnten Sie entweder eingestellt gerade das Bild als Elemente style.backgroubndImage Eigenschaft oder besser gesagt, eine CSS-Klasse erstellen und füge es der Schaltfläche hinzu, wenn du es brauchst (durch js).

// Alt 1, changing the style of the element: 
pauseButton.style.backgroundImage = "url(Images/pausebackground.png)"; 

// Alt 2, creating a css class and adding it to the element when needed: 
// CSS. 
.my-special-button-class { 
    background-image: url(Images/pausebackground.png) 
} 

// JS. 
pauseButton.classList.add("my-special-button-class"); 

Answer 3

Ein Bild in HTML verwendet den <img>-Tag, das ein src Attribut auf die Bild-URL zeigen hat, wie so:

<img src="Images/pausebackground.png"> 

Bild in den HTML einzufügen, Sie innerHTML verwenden könnten, aber es ist am besten, ein tatsächliches HTML-Element hinzuzufügen:

var image = document.createElement('img'); // Create the HTML element 
image.setAttribute('src', 'Images/pausebackground.png'); // Set the image src 
pauseButton.appendChild(image); // Place it inside the button 

ein anderes Bild zu setzen, alles, was Sie tun müssen, ist ändert das src Attribut auf der i Magier-Tag.