如何在内容中插入base64的图片

最近在做一个展示内的平台时，甲方要求做假数据展示内容，里面有图片和文字，开始是把图片转成了base64的方式，但是不好管理，一要求改内容就还能麻烦，图片还不好统一管理，于是查了一下资料后做成了图片的灵活调用：

比如以下是一个模拟的json数据，图片存在于文章段落之间。

"dataList": [
  {
    "title": "XX省农业农村厅厅长调研",
    "from": "魅力中国",
    "time": "2023-12-15 13:00:00",
    "author": "小米粥",
    "content" : "9月7日，调研组分别从优势特点、绿色发展、文化植入等方面对数字平台提出宝贵意见。\n <img src=\"=img1.png=\"/> \n三是要建立养殖标准，坚持以可持续发展带动农民经济增收，为乡村振兴贡献力量。\n <img src=\"=img2.png=\"/>\n引导农户根据市场调节生产规模，促进持续健康发展。",
    "imgNames" : ["img1.png","img2.png"]
  }
]

async created() {
  //dataInfo为引入的数据源
  let obj = this.dataInfo;
  let imgNames = obj.imgNames;
  let contentOld = obj.content;
  await imgNames.forEach(item => {
    //这里是图片统一存放的地址
    let img = require('@/components/echart/right/rightTop/right/imgs/' + item);
    //转base64
     this.imgToBase64(img).then(res => {
      if (res) {
        contentOld = contentOld.replace(('=' + item + '='), res);
        this.content = contentOld;
      }
    }).catch(err => {
      console.log('错误信息', err);
    });
  })
},

这里是具体的调用方法

methods: {
  imgToBase64(url) {
    return new Promise((resolve, reject) => {
      const image = new Image()
      image.src = url
      image.onload = () => {
        const canvas = document.createElement('canvas')
        canvas.width = image.naturalWidth // 使用 naturalWidth 为了保证图片的清晰度
        canvas.height = image.naturalHeight
        canvas.style.width = `${canvas.width / window.devicePixelRatio}px`
        canvas.style.height = `${canvas.height / window.devicePixelRatio}px`
        const ctx = canvas.getContext('2d')
        if (!ctx) {
          return null
        }
        ctx.drawImage(image, 0, 0)
        const base64 = canvas.toDataURL('image/png')
        return resolve(base64)
      }
      image.onerror = (err) => {
        return reject(err);
      }
    })
  }
}

以上就为具体代码，应对于没有后台接口的前端静态展示方式。