（1）下面是网络上普遍出现的代码，代码本身没问题，但是会出现导出图片不显示，最有可能出现的现象是第一次导出不显示，导出多次后可能图片显示

（2）问题原因：看这两行代码

canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas

dataURL = canvas.toDataURL("image/" + ext, quality); //转换图片为dataURL

canvas在绘图的过程中将图片数据转成base64格式，图片加载时间相对较长，会有个向缓存写的过程，在循环加载图片的过程中，当前图片加载还未完成，又循环到加载下个图片，下载生成word就会图片不显示，多次下载后，缓存已经加载到数据，下载生成word又会显示图片。

(3)解决问题办法：抱歉大家，我是后端工程师，无代码粘贴，只提供解题思路

1.使用定时器，提前将图片数据转成base64

2.使用阻塞同步的方式，让当前一个图片绘制成功，再循环绘制下一个图片

（4）网上普遍写法示例（会出图片不显示问题）

//如果导出Word得图片不能正常显示 解决方案 //将图片URL路径改为下面方式 $(function () {     changeImgToDataurl() }) function changeImgToDataurl() {     let currentConatiner = document.getElementById("route");       var regularImages = currentConatiner.querySelectorAll("img");       for (var i = 0; i < regularImages.length; i++) {         var imgURL = regularImages[i].currentSrc;         this.getBase64(imgURL, regularImages[i]);       } } function getBase64(url, charImg) {     var Img = new Image();     Img.crossOrigin = "Anonymous";//跨域必须使用，且后台也得设置允许跨域     dataURL = '';     Img.src = url;     Img.onload = function () { //要先确保图片完整获取到，这是个异步事件         var canvas = document.createElement("canvas"), //创建canvas元素           width = Img.width, //确保canvas的尺寸和图片一样           height = Img.height;         canvas.width = width;         canvas.height = height;         canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas         //图片后缀名         let ext = Img.src.substring(Img.src.lastIndexOf(".") + 1).toLowerCase();         //图片质量         let quality = 0.8;         //转成base64         dataURL = canvas.toDataURL("image/" + ext, quality); //转换图片为dataURL         this.condataurl(dataURL, charImg); //调用回调函数     }; } function condataurl(dataURL, charImg) {     charImg.src = dataURL; }