自定义BetterWMS时图片及图片链接无法显示的问题求助

我正在自定义BetterWMS，目前已成功实现过滤无值行的功能，但在尝试显示图片或图片链接时遇到问题。以下是相关代码：

import L from 'leaflet';
import axios from 'axios';

L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
  onAdd: function (map) {
    L.TileLayer.WMS.prototype.onAdd.call(this, map);
    map.on('click', this.getFeatureInfo, this);
  },

  onRemove: function (map) {
    L.TileLayer.WMS.prototype.onRemove.call(this, map);
    map.off('click', this.getFeatureInfo, this);
  },

  getFeatureInfo: function (evt) {
    var url = this.getFeatureInfoUrl(evt.latlng);
    var showResults = L.Util.bind(this.showGetFeatureInfo, this);

    axios
      .get(url)
      .then(function (response) {
        var err = typeof response.data === 'string' ? null : response.data;
        showResults(err, evt.latlng, response.data);
      })
      .catch(function (error) {
        showResults(error);
      });
  },

  getFeatureInfoUrl: function (latlng) {
    const point = this._map.latLngToContainerPoint(latlng);
    const size = this._map.getSize();

    const x = Math.round(point.x);
    const y = Math.round(point.y);

    const params = {
      request: 'GetFeatureInfo',
      service: 'WMS',
      crs: 'EPSG:4326',
      styles: this.wmsParams.styles,
      transparent: this.wmsParams.transparent,
      version: this.wmsParams.version,
      format: this.wmsParams.format,
      bbox: this._map.getBounds().toBBoxString(),
      height: size.y,
      width: size.x,
      layers: this.wmsParams.layers,
      query_layers: this.wmsParams.layers,
      info_format: 'text/html',
      // info_format: 'application/json',
      x: x,
      y: y,
    };

    return this._url + L.Util.getParamString(params, this._url, true);
  },
  showGetFeatureInfo: function (err, latlng, content) {
    if (err) {
      console.log(err);
      return;
    }
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = content;

    var rows = tempDiv.querySelectorAll('tr');

到此处为止一切正常：

for (var i = 0; i < rows.length; i++) {
      var row = rows[i];
      var cells = row.querySelectorAll('td');

      var isFotoUrl = cells[0].textContent.trim() === 'foto_url';

      if (isFotoUrl) {
        var imgUrl = cells[1].textContent.trim();
        imgUrl = imgUrl.replace(/["']/g, '');
        var link = document.createElement('a');
        link.href = imgUrl;
        link.target = '_blank';
        link.textContent = imgUrl;
        cells[1] = link; // 问题出在这里
      }

但从这里开始出现问题：

var hasValue = Array.from(cells).some(function (cell) {
        return (
          cell.textContent.trim() !== '' &&
          cell.textContent.trim() !== 'NULL'
        );
      });

      if (!hasValue) {
        row.parentNode.removeChild(row);
      }
    }

    var filteredContent = tempDiv.innerHTML;

    L.popup({ maxWidth: 800 })
      .setLatLng(latlng)
      .setContent(filteredContent)
      .openOn(this._map);
  },

});

L.TileLayer.betterWms = function (url, options) {
  console.log(url, options);
  return new L.TileLayer.BetterWMS(url, options);
};

问题原因 #

直接给cells[1] = link只是修改了变量引用，并没有真正把新创建的<a>标签插入到DOM树中。cells是querySelectorAll返回的静态节点列表，修改数组元素不会影响实际的DOM结构，所以最终tempDiv.innerHTML里还是原来的单元格内容，没有生成预期的链接。

解决方案 #

把cells[1] = link;替换成DOM元素替换方法，比如使用replaceChild：

if (isFotoUrl) {
  var imgUrl = cells[1].textContent.trim();
  imgUrl = imgUrl.replace(/["']/g, '');
  var link = document.createElement('a');
  link.href = imgUrl;
  link.target = '_blank';
  link.textContent = imgUrl;
  // 替换DOM树中的原单元格
  row.replaceChild(link, cells[1]);
}

如果想要直接显示图片而非链接，可以换成<img>标签：

if (isFotoUrl) {
  var imgUrl = cells[1].textContent.trim();
  imgUrl = imgUrl.replace(/["']/g, '');
  var img = document.createElement('img');
  img.src = imgUrl;
  img.style.maxWidth = '200px'; // 限制图片宽度避免弹窗过大
  row.replaceChild(img, cells[1]);
}

替换后hasValue的判断依然有效，因为第一列是foto_url，行不会被误删。

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