<view v-html="goodsDetail.htmlRemark" @click="imageChagange($event)"></view>点击富文本中的图片获取图片的src

这个Vue模板片段展示了在一个富文本`<view>`标签里嵌入HTML内容，并且绑定了一个`@click`事件处理函数`imageChagange`，当用户点击这个区域时，会传递当前点击事件`$event`给`imageChagange`方法。在这个`imageChagange`方法内部，你需要解析`goodsDetail.htmlRemark`变量所存储的HTML字符串，找到图片元素（通常是`<img>`标签），并从中提取出`src`属性。

你可以通过JavaScript DOM操作来实现这个功能：

1. 首先，在`imageChagange`方法中，接收`$event`参数：

methods: {
  imageChangage(e) {
    const imgElement = e.target; // 获取被点击的目标元素
    if (imgElement.tagName.toLowerCase() === 'img') { // 检查是否点击的是图片
      const src = imgElement.src; // 提取图片的src属性
      // 然后可以进一步处理src，例如显示、下载等
    }
  },
}

2. 解析`htmlRemark`，这通常涉及到HTML解析库如`cheerio`（Node.js环境）或`vue-render-dom`（Vue.js环境）：
- Node.js:

     import cheerio from 'cheerio';

     imageChagange(e) {
       // ...其他代码
       const $ = cheerio.load(goodsDetail.htmlRemark);
       const imgElements = $('img'); // 获取所有<img>元素
       imgElements.each((index, imgEl) => {
         if (imgEl.tagName.toLowerCase() === 'img') {
           const src = $(imgEl).attr('src');
           // 处理src...
         }
       });
     }

- Vue.js (假设已安装 vue-render-dom):

     import { render } from 'vue-render-dom';

     imageChagange(e) {
       // ...其他代码
       const renderedElement = renderToString({
         template: goodsDetail.htmlRemark,
         components: {}, // 如果有自定义组件，需要包含在这里
       });
       const $ = cheerio.load(renderedElement); // 使用cheerio解析渲染后的HTML
       $('img').each((index, imgEl) => {
         const src = $(imgEl).attr('src');
         // 处理src...
       });
     }

记得确保你的项目已经包含了相关的HTML解析库，并且在实际应用中处理好错误处理，因为解析HTML可能会遇到各种情况。