通过ajax改变src的值,vue 根据ajax 返回的key value值动态改变img的src

问题描述

我想根据后台返回来的json其中的一个数据，来动态改变img src的路径从而显示不同的图片

比如后台返回的是[{"ALARMNAME":"大风黄色预警"}] 那我就显示大风黄色预警的图片

[{"ALARMNAME":"暴雪黄色预警"}]那我就显示暴雪预警的图片

问题出现的环境背景及自己尝试过哪些方法

尝试了很多没成功

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

天气查询

• //想改变的路径

  {{w.ALARMNAME}}//这里就是现实出来的信息想根据这个信息改变src路径

  {{w.PUBLISHTIME}}

  • 详情信息：

    {{w.CONTENT}}

mui.init({

//启用右滑关闭功能

swipeBack: true,

});

new Vue({

el: '#weather',

data: {

weatherwaring: null,

},

methods: {

// 天气预警

Get_YJweather: function() {

var _this = this;

mui.ajax('https://segmentfault.com/ask', {

data: {

timefrom: 'xxx',

timeto: 'xxx'

},

dataType: 'json', //服务器返回json格式数据

type: 'post', //HTTP请求类型

timeout: 50000, //超时时间设置为10秒；

success: function(res) {

_this.weatherwaring = JSON.parse(res);

console.log('请求成功' + res);

},

error: function(xhr, type, errorThrown) {

console.log('请求失败');

}

});

}

}

});

你期待的结果是什么？实际看到的错误信息又是什么？

最好能少改动一些代码是实现谢谢各位大神了