Hintergrundbild wechseln

[admin]

Du solltest in dein Beispiel mal richtige Bilder rein machen und keine 1x1 Pixel große Dummys weil so kann man schlecht testen.
Du weißt aber schon was picture macht und was das img da drin tut oder?
Das img Element darin kommt nur zum Einsatz, wenn der Browser das <picture> nicht unterstützt , oder man im picture Element keine Übereinstimmung hat.

Bei dein code hast du alle Größen drin.
Einmal alles unter 660px und einmal alles über 660 Pixel.
Somit kommt das img Tag nicht zum Einsatz.

Dieser Code funktioniert,

Code:

<picture>
<source media="(min-width:661px)" srcset="https://basti1012.bplaced.net/image/2.png">
<source media="(max-width:660px)" srcset="https://basti1012.bplaced.net/image/2.png">
<img id="headImageImg" src="https://basti1012.bplaced.net/image/2.png" data-src="https://basti1012.bplaced.net/image/2.png" alt="" width="2000" height="1000"/>
</picture>
<script>

  
function wechseln(){
var newbild=document.querySelector('picture img');
  console.log(newbild)
  newbild.src='https://basti1012.bplaced.net/image/4.png';
      newbild.style.width='100%';
          newbild.style.height='auto';
    console.log(newbild)
  }
  wechseln();
</script>

Das siehst du auch in der Konsole das das Bild in <img> geändert wurde, aber wie gesagt bei dein Source code kommt es sowieso nicht einsetzt.
Das kannst du testen, wenn du das min rausnimmst

Code:

<picture>
<source media="(max-width:660px)" srcset="https://basti1012.bplaced.net/image/2.png">
<img id="headImageImg" src="https://basti1012.bplaced.net/image/2.png" data-src="https://basti1012.bplaced.net/image/2.png" alt="" width="2000" height="1000"/>
</picture>
<script>

  
function wechseln(){
var newbild=document.querySelector('picture img');
  console.log(newbild)
  newbild.src='https://basti1012.bplaced.net/image/4.png';
      newbild.style.width='100%';
          newbild.style.height='auto';
    console.log(newbild)
  }
  wechseln();
</script>

Im Browse siehst du das jetzt auch das ab 660px das img Element greift