使用javascript更改图像源而没有html中的默认图像源答案

【问题标题】：Changing image source with javascript without default image source in html使用javascript更改图像源而没有html中的默认图像源
【发布时间】：2020-07-08 20:49:00
【问题描述】：

我在使用 javascript 更改图像源路径时遇到问题。我有在每次加载后更改页面颜色的想法。因此，我生成了具有五种颜色类型的 svg，并将它们放在文件夹中，分别为蓝色、红色、黄色......我知道路径是正确的，因为我通常在图像标签中尝试过它。我也尝试过使用 jquery，但我又失败了。如果你们中的任何人能发现我的错误，我将非常感激。

    //------------------------------------RANDOM-BACKGROUND--------------------------------------------

    var blue = "#43D5FA";
    var darker_blue = "#2f95af";
    var red = "#FF5757";
    var darker_red = "#b33d3d";
    var yellow = "#FFFF47";
    var darker_yellow = "#e1e142";
    var purple = "#8555E4";
    var darker_purple = "#734bc2";
    var turqoise = "#50FFB1";
    var darker_turqoise = "#47db98";
    var black = "#000000";

    //svgs
    var undraw_svg_vytvoreni_marketingu = document.getElementById("undraw-svg-vytvoreni-marketingu");

    //random output 
    var random = Math.floor(Math.random() * 5);
    console.log(random);

    //cycle integer
    var i;
    
    switch(random)
    {
        //purple
        case 0:
            document.body.style.background = purple;
            
            undraw_svg_vytvoreni_marketingu.src = "/assets/img/undraw-svg/red/vytvoreni-marketingu.svg";
        break;

        //turqoise
        case 1:
            document.body.style.background = turqoise;

            undraw_svg_vytvoreni_marketingu.src = "assets/img/undraw-svg/purple/vytvoreni-marketingu.svg";
        break;

        //blue
        case 2:
            document.body.style.background = blue;

            undraw_svg_vytvoreni_marketingu.src = "assets/img/undraw-svg/purple/vytvoreni-marketingu.svg";
        break;

        //yellow
        case 3:
            document.body.style.background = yellow;

            undraw_svg_vytvoreni_marketingu.src = "assets/img/undraw-svg/red/vytvoreni-marketingu.svg";
        break;

        //red
        case 4:
            document.body.style.background = red;

            undraw_svg_vytvoreni_marketingu.src = "assets/img/undraw-svg/blue/vytvoreni-marketingu.svg";
        break;

    }
    
    function info_button_color(color) {
        info_button.style.color = color;
    }

<!DOCTYPE html>
<html lang="cs" translate="no">
<head>
    <meta charset="utf-8">
    <meta name="google" content="notranslate">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="dist/bundle.css">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
</head>
<body>  
  <section id="welcome" class="welcome container-fluid">
        <div class="row h-100">
            <div class="col-sm-6 d-flex align-items-center justify-content-center">
                <div class="welcome-img">
                    <img id="undraw-svg undraw-svg-vytvoreni-marketingu" src="//:0" > 
                </div>
            </div>
        </div>
        <span class="material-icons">expand_more</span>
    </section>
</body>
</html>

【问题讨论】：

您的 id 不等于 undraw-svg-vytvoreni-marketingu 并且其中有一个空格：undraw-svg undraw-svg-vytvoreni-marketingu。因此，当控制台读取时，document.getElementById() 的返回值是null。
您可以在设置src 后创建img 元素并将其追加到DOM。
感谢 ID 提示，我忘记了 ID 必须是唯一的，因为对于类，您可以在一个标签中拥有更多类。无论如何，这并没有解决问题，所以我会尝试创建 img 元素并看看它是如何进行的。

标签： javascript html jquery image backend

【解决方案1】：

如果您将img 的id 更改为有效的id，并将您的getElementById() 更改为id，则它可以工作。

你在做什么：

document.getElementById("undraw-svg-vytvoreni-marketingu")

同时拥有：

<img id="undraw-svg undraw-svg-vytvoreni-marketingu" src="//:0" >

//------------------------------------RANDOM-BACKGROUND--------------------------------------------

var blue = "#43D5FA";
var darker_blue = "#2f95af";
var red = "#FF5757";
var darker_red = "#b33d3d";
var yellow = "#FFFF47";
var darker_yellow = "#e1e142";
var purple = "#8555E4";
var darker_purple = "#734bc2";
var turqoise = "#50FFB1";
var darker_turqoise = "#47db98";
var black = "#000000";

//svgs
var undraw_svg_vytvoreni_marketingu = document.getElementById("blubb");

//random output 
var random = Math.floor(Math.random() * 5);
console.log(random);

//cycle integer
var i;

switch(random)
{
    //purple
    case 0:
        document.body.style.background = purple;

        undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643587.svg";
    break;

    //turqoise
    case 1:
        document.body.style.background = turqoise;

        undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643586.svg";
    break;

    //blue
    case 2:
        document.body.style.background = blue;

        undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643583.svg";
    break;

    //yellow
    case 3:
        document.body.style.background = yellow;

        undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643582.svg";
    break;

    //red
    case 4:
        document.body.style.background = red;

        undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643581.svg";
    break;

}

function info_button_color(color) {
    info_button.style.color = color;
}

<!DOCTYPE html>
<html lang="cs" translate="no">
<head>
    <meta charset="utf-8">
    <meta name="google" content="notranslate">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="dist/bundle.css">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
</head>
<body>  
  <section id="welcome" class="welcome container-fluid">
        <div class="row h-100">
            <div class="col-sm-6 d-flex align-items-center justify-content-center">
                <div class="welcome-img">
                    <img id="blubb" src="//:0" > 
                </div>
            </div>
        </div>
        <span class="material-icons">expand_more</span>
    </section>
</body>
</html>

【讨论】：