vue.js - Nativescript vue图像不炫耀
问题描述
为什么我的图片不显示?
标签正确显示 url 但图像未显示。为什么不显示?需要添加一些东西吗?它以前工作过。如果我像这样添加带有 src 纯文本的普通图像,它会显示
<StackLayout>
<Button text="Make new screensot" />
<Button text="Load images" @tap="loadImages()" />
<Label v-if="!loadedImages" text="Not loaded images" textWrap="true" />
<RadListView v-else for="(item,index) in imagesS"
itemHeight="100">
<v-template>
<StackLayout orientation="vertical">
<Label :text="item.url"></Label>
<Image :src="item.url" stretch="aspectFill" class="screenshots" />
</StackLayout>
</v-template>
</RadListView>
<ActivityIndicator class="activity-indicator" :busy="indicatorS"></ActivityIndicator>
</StackLayout>
我添加了css但也没有工作
.screenshots{
height:100;
width:100;
}
方法
methods: {
loadImages() {
console.log('starting loading images');
this.indicatorS = true;
axios.get(this.jsonUsers + this.ID + '/images')
.then((response) => {
const imgCount = response.data.length;
console.log("count- " + imgCount)
var imagesArr = response.data;
console.dir("images - " + response.data[0].url)
this.$store.commit('setImages',imagesArr);
console.log('images fully loaded');
this.$store.commit('setLoadedImages');
this.indicatorS = false;
})
}
}
解决方案
我在操场上试过这个。https://play.nativescript.org/?template=play-vue&id=aKZ2wm。
我认为您使用的 URL 并不是真正的图像。https://imgur.com/a/AkEg8vy这就是您正在使用的,它不是图像的 URL,而是网页的 URL。
现在,如果我转到该页面并获取图像 URL https://i.imgur.com/78j1SJr.jpg。它工作正常。
推荐阅读
- python - 如何减少第一场比赛的延迟?Python
- php - 无法使用 php 更新 MySQL 中的数据有什么建议吗?
- r - 将函数列表传递给要评估的“微基准”
- kotlin - kotlin 类型与 shl 运算符不匹配
- jinja2 - jinja2 在 {for} 中使用 {if}
- r - 如何在不了解用户目录的情况下访问文件
- javascript - Angularjs 和 Angular 8 混合并执行代码微细化得到错误:无法解析 xxx-service 的所有参数
- google-cloud-platform - GCE 中共享 Docker 卷的等价物是什么?
- python - 在没有循环的python中重复应用函数
- javascript - 如何使用递归返回 N 个硬币翻转的所有组合?