如何修改JS与HTML代码实现点击按钮从RESTapi获取对应id的widget资源

你之前直接替换img的src属性出现链接损坏，大概率是接口地址拼接错误、接口返回格式不符合直接赋值要求，或者存在跨域、鉴权限制，你可以按以下步骤调整：

1. 先声明API基础配置 #

建议把接口公共前缀、资源总数这类固定参数提前声明为常量，后续维护更方便，避免硬编码出错：

// 替换成你实际的REST API前缀，比如接口地址是https://xxx.com/api/widget/1 就填前缀部分
const WIDGET_API_BASE = '你的REST API接口前缀';
// 资源总数固定为1-10共10个
const TOTAL_WIDGET_COUNT = 10;

2. 按接口返回格式选择对应实现逻辑 #

情况1：接口直接返回图片二进制流 #

如果请求接口前缀+id直接返回图片资源，直接拼接地址赋值给src即可，注意id范围是1-10，你之前的page变量是从0开始计数，需要+1对应正确的id，这也是很多人直接替换src出问题的常见原因：

const WIDGET_API_BASE = '你的REST API接口前缀';
const TOTAL_WIDGET_COUNT = 10;
let page = 0;

function next() {
  page++;
  page %= TOTAL_WIDGET_COUNT;
  // 拼接完整接口地址，page从0到9，+1对应id1到10
  const fullApiUrl = `${WIDGET_API_BASE}${page + 1}`;
  document.getElementById('myImg').src = fullApiUrl;
}

HTML部分只需要把初始的img src改成第一个资源的接口地址即可，按钮代码无需改动。

情况2：接口返回JSON格式数据 #

如果接口返回的是包含图片地址的JSON结构（比如{"id":1,"image_url":"xxx","title":"xxx"}），需要先发起请求拿到数据，再提取图片地址赋值：

const WIDGET_API_BASE = '你的REST API接口前缀';
const TOTAL_WIDGET_COUNT = 10;
let page = 0;

async function next() {
  page++;
  page %= TOTAL_WIDGET_COUNT;
  const requestUrl = `${WIDGET_API_BASE}${page + 1}`;
  try {
    const response = await fetch(requestUrl);
    const widgetData = await response.json();
    // 这里的image_url替换成你接口返回的图片地址对应的字段名
    document.getElementById('myImg').src = widgetData.image_url;
    document.getElementById('myImg').alt = widgetData.title || String(page+1);
  } catch (err) {
    console.error('资源加载失败：', err);
    // 可自行添加加载失败的兜底图逻辑
  }
}

3. 特殊场景适配 #

如果接口需要鉴权、存在跨域限制，不能直接把接口地址赋值给src，可以用fetch携带鉴权信息请求资源，转成临时blob地址再赋值：

async function next() {
  // 省略page计数逻辑
  const requestUrl = `${WIDGET_API_BASE}${page + 1}`;
  try {
    const response = await fetch(requestUrl, {
      headers: {
        // 按接口要求携带鉴权信息
        'Authorization': 'Bearer 你的用户token'
      }
    });
    const imgBlob = await response.blob();
    const tempImgUrl = URL.createObjectURL(imgBlob);
    document.getElementById('myImg').src = tempImgUrl;
  } catch (err) {
    console.error('资源加载失败：', err);
  }
}

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