html2canvas把div生成图片时div中的图片为什么没显示？

Question

下面是一个div块：

我用html2canvas把这个div生成了图片，然后用jspdf把图片保存成pdf格式。

现在的问题是html2canvas把div生成图片时DIV里面的图片没有显示，这图片是需要单独处理吗？有遇到过这问题的没？

下面是代码：

 <div id="printContent" class="printContent">          <Histology :isPrint="isPrint" ref="childRef" />        </div>

const printHandle = async () => {  console.log('打印')  console.log('生成pdf')  isPrint.value = true  setTimeout(async () => {    const content = document.getElementById('printContent')    if (content) {      const canvas = await html2canvas(content, { scale: 2 })      const imgData = canvas.toDataURL('image/png')      const pdf = new jsPDF('p', 'mm', 'a4')      const imgProps = pdf.getImageProperties(imgData)      const pdfWidth = pdf.internal.pageSize.getWidth()      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)      // 将PDF输出为Blob对象      const pdfBlob = pdf.output('blob')      // 创建一个链接元素并设置其属性      const downloadLink = document.createElement('a')      downloadLink.href = URL.createObjectURL(pdfBlob)      downloadLink.download = 'document.pdf' // 设置下载的文件名      // 触发点击事件以开始下载      document.body.appendChild(downloadLink)      downloadLink.click()      document.body.removeChild(downloadLink) // 之后可以移除链接元素      isPrint.value = false    }  }, 500)}

Answer 1

看看生成图片的结构图

Answer 2

控制台没有报错吗，大概率是图片跨域了，前台需要设置下跨域请求（前提是资源支持跨域）

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img...