如何在JavaScript对象键值中结合图片与段落？显示异常求助

问题根源 #

把Image DOM对象直接拼进模板字符串时，JavaScript会自动将其转换为默认的字符串表示[object HTMLImageElement]，不会渲染成实际图片。

方案一：拆分文本与图片，分别插入DOM #

适合需要单独控制图片元素（比如添加样式、事件）的场景：

var img = new Image();
img.src = "https://images.unsplash.com/photo-1664575198308-3959904fa430?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80";
img.alt = "star"

// 把文本和图片分开存储
var data = {
  english: {
    visionText: "To reinvent finance through innovation & technology ",
    visionImage: img,
    visionTextEnd: " making it convenient, accessible & fair to all."
  }
}

// 获取目标段落元素
var targetEl = document.getElementById("ourvisioncardparagraph");
// 依次插入文本、图片、剩余文本
targetEl.textContent = data.english.visionText;
targetEl.appendChild(data.english.visionImage);
targetEl.append(data.english.visionTextEnd);

方案二：用HTML字符串替代Image对象，通过innerHTML插入 #

如果不需要操作图片DOM元素，这种写法更简洁：

// 直接定义img标签的HTML字符串
var imgHtml = `<img src="https://images.unsplash.com/photo-1664575198308-3959904fa430?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="star">`

var data = {
  english: {
    ourvisioncardparagraph: `To reinvent finance through innovation & technology ${imgHtml} making it convenient, accessible & fair to all.`
  }
}

// 给目标元素设置innerHTML渲染内容
document.getElementById("ourvisioncardparagraph").innerHTML = data.english.ourvisioncardparagraph;

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