如何用JavaScript获取JSON中person字段值并设置为img标签src？

首先得先把你提供的JSON调整成合法格式——里面的单引号要换成双引号，不然JavaScript解析的时候会报错。先整理成可直接使用的对象：

// 修正格式后的JavaScript对象
const taskData = { 
  start_date: "2018-03-19 09:00", 
  end_date: "2018-03-19 11:00", 
  text: "Plan: Make New Server", 
  description: "Setup Apache", 
  section_id: "mobilepay", 
  person: "peterpaul,janelane", 
  progress: "", 
  state: "plan", 
  delay: "", 
  type: "task" 
};

接下来分几步实现你的需求：

1. 提取并拆分person字段的值 #

person字段是逗号分隔的两个名字，用split(',')就能把它拆成单独的名字数组：

const personNames = taskData.person.split(',');
// 现在personNames的值是 ["peterpaul", "janelane"]

2. 将名字设置为img的src属性 #

分两种场景来处理：

场景一：动态创建新的img元素并添加到页面 #

如果需要自动生成头像标签，可以遍历名字数组，逐个创建img并设置属性：

personNames.forEach(name => {
  const avatarImg = document.createElement('img');
  // 这里假设头像的URL格式是 `/avatars/{name}.png`，你可以根据实际情况修改路径
  avatarImg.src = `/avatars/${name}.png`;
  avatarImg.alt = `${name}的头像`; // 记得加alt属性，提升页面可访问性
  // 把img添加到页面的目标容器，比如body或者某个指定的div
  document.body.appendChild(avatarImg);
});

场景二：给页面上已有的img元素设置src #

如果页面已经有对应的img标签（比如id分别为avatar-peter和avatar-jane），直接获取元素赋值即可：

const peterAvatar = document.getElementById('avatar-peter');
const janeAvatar = document.getElementById('avatar-jane');

peterAvatar.src = `/avatars/${personNames[0]}.png`;
janeAvatar.src = `/avatars/${personNames[1]}.png`;

peterAvatar.alt = `${personNames[0]}的头像`;
janeAvatar.alt = `${personNames[1]}的头像`;

补充：如果数据是JSON字符串格式 #

如果你的数据是后端返回的JSON字符串，需要先解析成JavaScript对象：

const jsonString = `{ 
  "start_date": "2018-03-19 09:00", 
  "end_date": "2018-03-19 11:00", 
  "text": "Plan: Make New Server", 
  "description": "Setup Apache", 
  "section_id": "mobilepay", 
  "person": "peterpaul,janelane", 
  "progress": "", 
  "state": "plan", 
  "delay": "", 
  "type": "task" 
}`;

const taskData = JSON.parse(jsonString);
// 之后的步骤和上面完全一致

内容的提问来源于stack exchange，提问作者Dave