极客观点
项目管理
HarmonyOS
问题描述
我想根据后台返回来的json其中的一个数据，来动态改变img src的路径从而显示不同的图片
比如后台返回的是[{"ALARMNAME":"大风黄色预警"}] 那我就显示大风黄色预警的图片
[{"ALARMNAME":"暴雪黄色预警"}]那我就显示暴雪预警的图片
问题出现的环境背景及自己尝试过哪些方法
尝试了很多没成功
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天气查询</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../css/mui.min.css">
<!-- 日期选择器 -->
<link rel="stylesheet" href="../css/mui.picker.min.css">
<style type="text/css">
</style>
</head>
<body>
<!-- 页面主体 -->
<div id="weather" class="mui-content">
<!-- 预警信号 -->
<div class="mui-control-content mui-active">
<ul v-for="w in weatherwaring">
<li>
<a>
<img src="../img/icon/weatherIcon/df-y.png">//想改变的路径
<div>
{{w.ALARMNAME}}//这里就是现实出来的信息想根据这个信息改变src路径
<p>{{w.PUBLISHTIME}}</p>
</div>
</a>
<ul>
<li>
<span>详情信息：
<p>{{w.CONTENT}}</p>
</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.2.5.17.js"></script>
<script src="../js/mui.picker.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> -->
<script type="text/javascript">
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('请求失败');
}
});
}
}
});
</script>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
最好能少改动一些代码是实现谢谢各位大神了
