时间戳

首页 > 解决方案 > 将图像的 url 分配给标记html

javascript - 将图像的 url 分配给标记html

问题描述

你好，我在文件索引中有这个：

<img id="lang__Logo" class="lang__L" atl="Logo Lang">

我想从文件languages.json分配一个图像，我有这个：

"en": {
    "langdesc": "English",
    "main__l--ch1": "About Me",
    "main__l--ch2": "Estudies",
    "main__l--ch3": "Skills",
    "main__l--ch4": "Biefcase",
    "main__l--ch5": "Contact",
    "lang__Logo": "../imagenes/united-kingdom.png"

所以我在这一行“lang__Logo”中分配了url的图像：“../imagenes/united-kingdom.png”

但它不起作用，图像没有显示在文件索引中，为什么？我做错了什么

这是我想要的： 在此处输入图像描述

标签： javascripthtmljson

解决方案

也许这个例子可以帮助

lang.js

lang = {
    "eng":{
        "lang_logo" : "img1.png",
        "text" : "English"
    },
    "esp":{
        "lang_logo" : "img2.png",
        "text" : "Spanish"
    }
}

const selectLang = document.querySelector("#selectLang")
const langImg = document.querySelector("#langImg")
const langTxt = document.querySelector("#langTxt")

selectLang.addEventListener("change", function(){
    langImg.src = lang[this.value].lang_logo
    langTxt.innerText = lang[this.value].text
})

这是html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="selectLang">
        <option value="eng">english</option>
        <option value="esp">spanish</option>
    </select>
    <img id="langImg" src="img1.png" alt="">
    <p id="langTxt">English</p>

    <script src="lang.js"></script> 
</body>
</html>

如果没有显示，请尝试检查 img 路径是否正确

推荐阅读