您好，社区再次与您联系。我正在使用openweather API，正在构建一个简单的天气应用程序。我遇到问题，无法显示每个城市的天气情况图标。
我将每个图标ID推送到newArray中，并且尝试使用url显示它，但没有运气http://openweathermap.org/img/w/10d.png
有什么建议吗？谢谢
var app = new Vue({
el: "#app",
data: {
test: [],
image: [],
newArray:[],
message: "",
url: "",
},
created: function () {
this.getData();
this.cities();
},
methods: {
getData: function () {
var fetchConfig =
fetch("https://api.myjson.com/bins/i8run", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.test = json.list;
console.log(app.test);
app.pushAnArr();
})
.catch(function (error) {
console.log(error);
})
},
cities: function () {
var fetchConfig =
fetch("https://pixabay.com/api/?key=10772849-8270b213e517e422b036ea0fd&q=city", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.image = json.hits;
console.log(app.image);
})
.catch(function (error) {
console.log(error);
})
},
pushAnArr: function(){
for(var i=0; i<app.test.length; i++){
app.newArray.push(app.test[i].weather[0].icon);
}
console.log(app.newArray);
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<div v-for="item in newArray" :key="item.id" class="thecard">
{{item}}
<img src="http://openweathermap.org/img/w/item.png" >
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
答案 0 :(得分：1)
您不能在属性中使用curly surfaceView.holder.addCallback(object : SurfaceHolder.Callback {
private var mCamera:Camera? = null
override fun surfaceDestroyed(holder: SurfaceHolder) {
mCamera?.stopPreview()
mCamera?.release()
mCamera = null
}
override fun surfaceCreated(holder: SurfaceHolder) {
mCamera = getCameraInstance()
try {
mCamera?.setPreviewDisplay(holder)
} catch (exception: IOException) {
mCamera?.release()
mCamera = null
}
}
override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int,
height: Int) {
mCamera?.startPreview()
}
})
fun getCameraInstance(): Camera? {
var c: Camera? = null
try {
c = openFrontFacingCamera()
} catch (e: Exception) {
}
return c
}
private fun openFrontFacingCamera(): Camera? {
var cameraCount = 0
var cam: Camera? = null
val cameraInfo = Camera.CameraInfo()
cameraCount = Camera.getNumberOfCameras()
for (camIdx in 0 until cameraCount) {
Camera.getCameraInfo(camIdx, cameraInfo)
if (cameraInfo.facing == Camera.CameraInfo.CAMERA_FACING_FRONT) {
try {
cam = Camera.open(camIdx)
} catch (e: RuntimeException) {
// Log.e(FragmentActivity.TAG, "Camera failed to open: " + e.localizedMessage)
}
}
}
return cam
}
。
使用：
{{item}}
<img v-bind:src="'http://openweathermap.org/img/w/' + item + '.png' " />
var app = new Vue({
el: "#app",
data: {
test: [],
image: [],
newArray:[],
message: "",
url: "",
},
created: function () {
this.getData();
this.cities();
},
methods: {
getData: function () {
var fetchConfig =
fetch("https://api.myjson.com/bins/i8run", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.test = json.list;
console.log(app.test);
app.pushAnArr();
})
.catch(function (error) {
console.log(error);
})
},
cities: function () {
var fetchConfig =
fetch("https://pixabay.com/api/?key=10772849-8270b213e517e422b036ea0fd&q=city", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.image = json.hits;
console.log(app.image);
})
.catch(function (error) {
console.log(error);
})
},
pushAnArr: function(){
for(var i=0; i<app.test.length; i++){
app.newArray.push(app.test[i].weather[0].icon);
}
console.log(app.newArray);
}
}
})