为通过 JSON 获取的图像创建 alt 标签答案

【问题标题】：creating alt tags for images gotten through JSON为通过 JSON 获取的图像创建 alt 标签
【发布时间】：2021-06-16 12:41:36
【问题描述】：

这个网页有三张卡片，上面有信息，下面有一张图片。我正在使用 JavaScript 和 HTML 来获取进入我的网页的信息。我的 JavaScript 从以下在线 JSON 文件中获取所需的信息。该文件不包含图像的替代文本。当我运行 Wave 评估工具时，它说我的图像需要 alt 文本。这些图像是通过 JSON 文件提供的。如何为它创建替代文本？我是在 HTML 中还是在 JavaScript 中做呢？我该怎么做？

Array(3)
0: 
averageRainfall: 14.2
currentPopulation: 501
motto: "This is Fish Heaven."
name: "Fish Haven"
photo: "fishhaven.jpg"
yearFounded: 1864__proto__: Object

1: averageRainfall: 16.65
currentPopulation: 5204
motto: "Home of Napoleon Dynamite."
name: "Preston"
photo: "preston.jpg"
yearFounded: 1866
__proto__: Object

2: 
averageRainfall: 15.75
currentPopulation: 2985
motto: "Historic Oregon Trail Oasis. The Soda is on Us.
"name: "Soda Springs"
photo: "sodasprings.jpg"
yearFounded: 1858
__proto__: Object



MY JAVASCRIPT file js/home.js
//set JSON source
const requestURL = 'https://byui-cit230.github.io/weather/data/towndata.json';

//fetch data
fetch(requestURL)
.then(function (response) {
    return response.json();
})

.then(function (jsonObject){
    const towns = jsonObject['towns'];

//create town input    
    const fishhaven = towns.filter(x => x.name === "Fish Haven");
    const preston = towns.filter(x => x.name === "Preston");
    const sodasprings = towns.filter(x => x.name === "Soda Springs");

    const sort = [];
    sort.push(...fishhaven, ...preston, ...sodasprings)
    console.log(sort);

   // let eachTown = towns.sort('sort');
    sort.forEach(town => {
      let card = document.createElement('div');
      let info = document.createElement('section');
      let name = document.createElement('h2');
      let motto = document.createElement('h3');
      let year = document.createElement('p'); 
      let pop = document.createElement('p');
      let rain = document.createElement('p');
      let photo = document.createElement('img'); 

      //use template literals
      name.textContent = `${town.name}`;
      motto.textContent = `${town.motto}`;
      year.textContent = `Year Founded: ${town.yearFounded}`;
      pop.textContent = `Population: ${town.currentPopulation}`;
      rain.textContent = `Annual Rainfall: ${town.averageRainfall}`;
      photo.src = `images/${town.photo}`;
  
      card.append(info);
      info.append(name);
      info.append(motto);
      info.append(year);
      info.append(pop);  
      info.append(rain);
      card.append(photo);  
      document.querySelector(".towns").appendChild(card);
    });
})



HTML only consists of:
<!DOCTYPE html>
<html lang="en-us">
<title>Whether to Weather Home</title>
  <body>
    <main class="homepage">
        <div class="hero-div">
            <img src="images/prestonhero.jpg" alt="image of mountains near Preston, Idaho.">
        </div>
    </main>
  <footer></footer>
    <script src="js/home.js"></script> 
 </body>
</html>

【问题讨论】：

标签： javascript html arrays json

【解决方案1】：

只需将alt 属性添加到photo

let photo = document.createElement('img'); 
photo.src = `images/${town.photo}`;

// What you need is the line below
photo.alt = `${town.name}`;

【讨论】：

非常感谢。我不敢相信这会这么容易。