当设备大小发生变化时，如何使用 javascript 更改 img src？

Question

我正在尝试使用 javascript 更改图像源。当 window 尺寸为 max-width: 576px; 时，应更换适合移动设备比例的图像来源。该元素是一个图像滑块。

我想知道的是如何在javascript中做到。我已经在下面的代码中尝试过了，但它没有改变。如果您能帮我找出错误，我将不胜感激。非常感谢。

<DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="beispiel.css">
</head>
<body>


<!-- Pictures in slideshow -->

    <div id="Slider" class="Slide col-1">

        <div class="Slide-ontop">
            <!--<div class="img1 slider-img mySlides"></div>-->
            <image class="changeimg slider-img mySlides" src="start-img-1.png"                      alt="Lets grow together" />
            <image class="slider-img mySlides" src="start-img-1.png" alt="Lets grow together" />
            
            <div class="teaser-box">
                <h1 class="serif-heading-1">Let us grow together</h1>
                <p class="sans-serif-text2">Wie die xx Ihnen helfen kann.</p>
            </div>
       </div>

    </div>

    <div class=" button2">
            <button class="w3-button demo sans-serif-caption space-button-left"                   onclick="currentDiv(1)">01</button> 
            <button class="w3-button demo sans-serif-caption"                                     onclick="currentDiv(2)">02</button> 
    </div>

    <script type="text/javascript"> 
            var slideIndex = 1;
            showDivs(slideIndex);
        
            function showDivs(n) {
                var i;
                var x = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("demo");
                if (n > x.length) {slideIndex = 1}    
                if (n < 1) {slideIndex = x.length}
                for (i = 0; i < x.length; i++) {
                     x[i].style.display = "none";  
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" w3-red", "");
                }
                x[slideIndex-1].style.display = "block";  
                dots[slideIndex-1].className += " w3-red";
            }


            let sliderimg = document.getElementsByClassName("changeimg");

            function changeImage(y) {
                if (y.matches) { // If media query matches
                sliderimg.src="slider1-mobile.png";
                } else {
                sliderimg.src="start-img-1.png";
                }
            }
            
            var y = window.matchMedia("(max-width: 576px)")
            changeImage(y);
            y.addEventListener(changeImage) ;
    </script>

</body>
</html>

Answer 1

我建议使用 srcset 属性，为什么要为此使用 JS，当我们已经内置了所有东西时。

这是您可以使用的示例。

在HTML

    <img srcset=" examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…">

在CSS

.img {
   background-image: url(examples/images/image-384.jpg); 
}
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  .img {
    background-image: url(examples/images/image-768.jpg);
  }
}

Answer 2

以不同的方式进行操作有一些值得一提的地方（请参阅其他答案），但鉴于您特别询问有关使用 javascript 的问题并提供了一些代码，这里是您的代码版本或多或少做你想做的事。我已经使用 console.log 来弥补图像不存在的事实。

<DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="beispiel.css">
</head>
<body>


<!-- Pictures in slideshow -->

    <div id="Slider" class="Slide col-1">

        <div class="Slide-ontop">
            <!--<div class="img1 slider-img mySlides"></div>-->
            <image class="changeimg slider-img mySlides" src="start-img-1.png"                      alt="Lets grow together" />
            <image class="slider-img mySlides" src="start-img-1.png" alt="Lets grow together" />
            
            <div class="teaser-box">
                <h1 class="serif-heading-1">Let us grow together</h1>
                <p class="sans-serif-text2">Wie die xx Ihnen helfen kann.</p>
            </div>
       </div>

    </div>

    <div class=" button2">
            <button class="w3-button demo sans-serif-caption space-button-left"                   onclick="currentDiv(1)">01</button> 
            <button class="w3-button demo sans-serif-caption"                                     onclick="currentDiv(2)">02</button> 
    </div>

    <script type="text/javascript"> 
            var slideIndex = 1;
            showDivs(slideIndex);
        
            function showDivs(n) {
                var i;
                var x = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("demo");
                if (n > x.length) {slideIndex = 1}    
                if (n < 1) {slideIndex = x.length}
                for (i = 0; i < x.length; i++) {
                     x[i].style.display = "none";  
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" w3-red", "");
                }
                x[slideIndex-1].style.display = "block";  
                dots[slideIndex-1].className += " w3-red";
            }


            let sliderimg = document.getElementsByClassName("changeimg");

            function changeImage(y) {
                // Define y here
                var y = window.matchMedia("(max-width: 576px)")
                if (y.matches) { // If media query matches
                    console.log('matches');
                    sliderimg.src="slider1-mobile.png";
                } else {
                    console.log('doesnt match');
                    sliderimg.src="start-img-1.png";
                }
            }
            
            changeImage();

            // attach the event listener to the window;
            // specify that it should be a resize event.

            window.addEventListener('resize',changeImage) ;
    </script>

</body>
</html>

当设备大小发生变化时，如何使用 javascript 更改 img src？

How is it possible to change an img src with javascript when the device size changes?

html

javascript

css

jquery

media-queries