vue img标签 src动态加载，计算属性computed或过滤filter的使用F(以及that代表this的用法）

 1.用computed动态加载img的src。

在<template></template>标签中这样写：

 <div class="content-item" v-for="(item,index) in dataList" :key="index" @click="dbclick(item)">
  <div class="content-item-title">
     <div><img :src="imgLevel(item.messageLevel)" alt=""><span>{
   
   { item.messageHead}}</span></div>
       <div>发布时间：{
   
   { item.publishTime}}</div>
     </div>
  <div class="content-item-content">{
   
   { item.message }}</div>
 </div>

<script></script>中这样写：

    computed: {
      imgLevel() {
        return (level) => {
          if (level == '1575334477402') {
            return require('@/assets/message/vector1_nimi.png')
          } else if (level == '1575334477401') {
            return require('@/assets/message/vector2_nimi.png')
          } else {
            return require('@/assets/message/vector3_nimi.png')
          }
        }
      },
    },

2.用filter动态加载img的src。

在<template></template>标签中这样写：

<div v-for="(item, index) in dataList" :key="index" class="right-item-container">
    <el-image class="app-img mr-16" :src="item.appIcon | filterIframePath(that)">
		<div slot="error" class="image-slot">
			<i class="el-icon-picture-outline"></i>
		</div>
	</el-image>
</div>

<script></script>中这样写:

data() {
    return {
        that: this,
        dataList: [],
        baseUrl: process.env.VUE_APP_OSS_PATH,
     }
},
filters: {
    filterIframePath(val,that) {
        return that.baseUrl + val
    }
}