如何在 Javascript 中使用 json 文件替换图像元素答案

【问题标题】：How to replace image element using a json file in Javascript如何在 Javascript 中使用 json 文件替换图像元素
【发布时间】：2021-04-25 00:58:39
【问题描述】：

我在尝试使用“替换”替换文档中的某个元素时遇到问题。我创建了一个名为 c 的 const，它使用 c.replace 抓取特定图像，但是当我运行我的代码时，我收到一个错误，指出“c.replace 不是函数”，有人可以提供一些指导吗？这是我正在使用的代码：




        function imgenlarger(){
        const t = "test.json"




fetch(t)
  .then(function (response) {
    return response.json();
  })
  .then(function (jsonObject) {
    const color = jsonObject['color'];
    for (let i = 0; i < color.length; i++ ) {

        let colorTitle = document.createElement('section');
        let colorName = document.createElement('h2');
        colorName.textContent = color[i];
        colorTitle.appendChild(colorName);
        document.querySelector('div.api-wrapper').appendChild(colorTitle);
        const c = color[i];
        document.getElementById('bigpic').src = c.replace('90x90', '225x225');
        
    }
  });










        
        }

我的 JSON 文件：

{
    "color":[
        {
            "0": "https://upload.wikimedia.org/wikipedia/commons/8/8e/Flag_Vice_Admiral_of_Red_1805_to_1864.png",
            "1": "https://upload.wikimedia.org/wikipedia/commons/8/8e/Flag_Vice_Admiral_of_Red_1805_to_1864.png",
            "2": "https://upload.wikimedia.org/wikipedia/commons/8/8e/Flag_Vice_Admiral_of_Red_1805_to_1864.png",
            "3": "https://upload.wikimedia.org/wikipedia/commons/8/8e/Flag_Vice_Admiral_of_Red_1805_to_1864.png"
        }
    ]
}

【问题讨论】：

c 是一个字符串，还是别的什么？ String.prototype.replace() 只存在于字符串中。
你能提供你正在使用的 json 内容，如果它很大的话，可以提供一部分吗？ replace 函数只适用于字符串，可能你的变量不是字符串。
谢谢大家。我正在尝试用 json 文件中的另一个图像替换一个图像。我进行了修改以反映这一点。
一件没有意义的事情是你正在循环一个数组，但只将源设置为一个元素。所以它只会是最后一个索引
const c = color[i]; console.log(i, c); 是你所期望的吗？

标签： javascript json replace fetch

【解决方案1】：

我发现我做错了什么。我不得不更改 json 文件以使其更有意义，所以我重写为：

{
    "color":[
        {
            "name": "red",
            "image": "https://upload.wikimedia.org/wikipedia/commons/8/8e/Flag_Vice_Admiral_of_Red_1805_to_1864.png"
        },
        {
            "name": "blue",
            "image": "https://static.onecms.io/wp-content/uploads/sites/28/2017/05/blue0517.jpg"
        },
        {
            "name": "yellow",
            "image": "https://professionals.tarkett.com/media/img/M/TH_3917013_3707013_3708013_3912013_3914013_800_800.jpg"
        },
        {
            "name": "green",
            "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Solid_green.svg/1200px-Solid_green.svg.png"
        }
    ]
}

并将js文件更新为：

function imgenlarger() {
   const t = "test.json"
   fetch(t)
       .then(function (response) {
           return response.json();
       })
       .then(function (jsonObject) {
           const color = jsonObject['color'];
           for (let i = 0; i < color.length; i++) {

               let colorTitle = document.createElement('section');
               let colorName = document.createElement('h2');
               colorName.textContent = color[i].name;
               colorTitle.appendChild(colorName);
               document.querySelector('div.api-wrapper').appendChild(colorTitle);

               var img = document.createElement("img");
               img.src = color[i].image;
               var oldImg = document.getElementById('bigpic');
               document.querySelector('div.api-wrapper').replaceChild(img, oldImg);
           }
       });        
   }

【讨论】：