需求如下：

需要动态加载图片，在写代码的时候发现，img标签直接动态绑定图片的相对路径的时候，图片不能显示，如下图效果

控制台查看元素的时候，发现也已经渲染，但是页面就是不显示

代码如下：

      <div class="legend-content">
        <div
          v-for="(item, index) in legendData"
          :key="index"
          class="legend-item"
        >
          <img 
            :src="'../../assets/img/legend/' + item.icon + '.png'" 
            class="icon-legend">
          <span>{{ item.name }}</span>
        </div>
      </div>

  data() {
    return {
      legendData: [
        {
          id: 1,
          name: '气象站',
          icon: 'tuli_qixiangzhan'
        },
        {
          id: 2,
          name: '关注点',
          icon: 'tuli_guanzhudian'
        },
        {
          id: 3,
          name: '供电局',
          icon: 'tuli_gongdianju'
        },
        {
          id: 4,
          name: '施工点',
          icon: 'tuli_shigongdian'
        },
        {
          id: 5,
          name: '学校',
          icon: 'tuli_xuexiao'
        },
        {
          id: 6,
          name: '医院',
          icon: 'tuli_yiyuan'
        }
      ]
    };
  },

原因：动态地址，路径被加载器解析为字符串，所以图片找不到
解决方法：
设置绝对路径或者相对路径是改为用require引入才能成功，就可以动态使用了。

  data() {
    return {
      isShow: true,
      legendData: [
        {
          id: 1,
          name: '气象站',
          imgSrc: require(`../../assets/img/legend/tuli_qixiangzhan.png`)
        },
        {
          id: 2,
          name: '关注点',
          imgSrc: require(`../../assets/img/legend/tuli_guanzhudian.png`)
        },
        {
          id: 3,
          name: '供电局',
          imgSrc: require(`../../assets/img/legend/tuli_gongdianju.png`)
        },
        {
          id: 4,
          name: '施工点',
          imgSrc: require(`../../assets/img/legend/tuli_shigongdian.png`)
        },
        {
          id: 5,
          name: '学校',
          imgSrc: require(`../../assets/img/legend/tuli_xuexiao.png`)
        },
        {
          id: 6,
          name: '医院',
          imgSrc: require(`../../assets/img/legend/tuli_yiyuan.png`)
        }
      ]
    };
  },

      <div class="legend-content">
        <div
          v-for="(item, index) in legendData"
          :key="index"
          class="legend-item"
        >
          <img 
            :src="item.imgSrc" 
            class="icon-legend">
        </div>
      </div>