Vue img src 动态切换的一个解决方案

Vue img src 动态切换的一个解决方案

在Vue 中，如果img 的src 为动态切换的话， 会出现图片无法加载的情况。 网上已经有了很多讨论，在解决这个问题， 基本上都是大同小异。 这里记录一下自己的解决方案，可能会和某些方案雷同。

背景

采用vue cli 3 创建的项目目录结构和 vue cli 2 会有不同。 本文的式样环境为 vue cli 3 中。

创建一个组件 item.vue

<template>
  <div class="root">
      <img :src="getImgUrl" alt="">
      <div>
          <p class="name">{
  {name}}</p>
          <p class="name">{
  {telephone}}</p>