在vue中使用变量给模板中的图片地址赋值失效问题，应使用require或import引入图片

在vue项目的HTML模板中展示图片，发现在模板中直接使用字符串的src是能够正常显示的，而使用变量赋值展示却发现不能正常显示出来。

// 直接使用字符串的src是能够正常显示
<img src="../../assets/images/logimg.svg">

// 通过变量获取的src必须使用require方式引入，否则就有问题
<img :src="getStatus(item.knit_order.process_status)" alt="">

getStatus(num) {
      let str = ''
      switch (num) {
        case 2:
          // 这种方式没有经过编译，而是直接使用了相对入径，所以导致不能正确显示
          str  = '~/assets/images/logimg.svg'
          break;
        case 3:
          // 必须通过require导入才能正确显示
          str  = require('~/assets/images/chuhuowan.png')
          break;
      
        default:
          break;
      }
      return str 
    },

直接赋值的方式会无效在页面中不显示,发现并没有经过编译，而是直接使用了相对入径，所以导致不能正确显示

通过require导入才能正确显示

使用import引入图片就需要提前导入图片（即跟引入组件一样引入图片），因为require是在运行时加载，而import是编译时加载；