判断后端接口返回的图片形式并拼接后端接口返回的图片

阿wei程序媛

已于 2022-12-15 11:02:08 修改

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-07-06 13:49:50 首次发布

本文链接：https://blog.csdn.net/m0_58565372/article/details/125635955

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

写项目时，有时候后端会返回不带http的图片，例如：images/works/userNo/3122A434D5ED48E39824A9C016458ADB.png，有时候返回带有http的图片例如：http://xxxx.com/images/works/userNo/3122A434D5ED48E39824A9C016458ADB.png，如何处理这种问题？

方法一

1.可以在filters.js封装过滤器

import Vue from 'vue'

//判断是否包含默认图片路径
Vue.filter('indexOfImageDomain', function(img, imageDomain) {
	// console.log(img, imageDomain)
	if (img != undefined) {
		if (img.indexOf(imageDomain) != -1) {
			return img
		} else {
			return imageDomain + img
		}
	}
})

其中 imageDomain: 'http://xxxx.com/'

2.在main.js引用过滤器

//引用过滤器
import './filters.js'

3.在需要判断图片的地方使用此过滤器

<el-table-column
            prop="image"
            label="藏品封面"
            align="center"
            width="150"
          >
    <template slot-scope="scope">
        <img
          :src="scope.row.image | indexOfImageDomain(common.imageDomain)"
           style="height: 140px; width: 140px"
         />
    </template>
           
</el-table-column>

方法二

1.可以在util文件夹下的index.js（公共方法）将其封装为方法

import { Message } from 'element-ui';
import axios from 'axios'
export default {
	imageDomain: 'http://xxxx.com/',
   
	indexOfImageDomain: function(img, imageDomain) {
		console.log(img, imageDomain)
		if(img != undefined) {
			if(img.indexOf(imageDomain) != -1) {
				return img
			} else {
				return imageDomain + img
			}
		}
	},
}

2.在main.js引入此方法

import common from './util' // 导入公共方法

3.在需要判断图片的地方使用此方法

<el-table-column
            prop="image"
            label="藏品封面"
            align="center"
            width="150"
          >
    <template slot-scope="scope">
       <img
            :src="common.indexOfImageDomain(scope.row.image,common.imageDomain)"
            style="height: 140px; width: 140px"
       />
    </template>
 </el-table-column>

方法三

1.使用三元运算符

<el-table-column prop="image" label="藏品封面" align="center" width="240">
      <template slot-scope="scope">
         <img
                :src="scope.row.image.indexOf('http')!=-1?scope.row.image:'https://xxxx.com/'+scope.row.image"
                style="height: 120px;width: 120px;"
          />
      </template>
</el-table-column>

注：indexOf()方法：返回指定字符串值在字符串中的位置，如果没有找到返回-1，该方法区分大小写。