Nativescript-vue 在点击事件时显示图像

Posted 2023-04-14

【中文标题】Nativescript-vue 在点击事件时显示图像

【英文标题】：Nativescript-vue display an image on tap event

【发布时间】：2019-01-25 11:07:40

【问题描述】：

对 Nativescript 和 Vue 非常陌生，所以请原谅我半生不熟的问题。

我正在尝试构建一个小应用程序，其中我有一个图像标签和一个按钮，按下按钮时，图像应该显示，我希望这个图像源作为变量传递，但是按下按钮，我的应用程序崩溃了，我正在 nativescript 操场上写这个。

代码如下：

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <StackLayout class="home-panel">

                <Image src="img_src" @tap="onImgTap" />
                <Button text="Button" @tap="onButtonTap" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
     const imageSourceModule = require("tns-core-modules/image-source");
     const imageSourceModule = require("tns-core-modules/image-source");
     const fileSystemModule = require("tns-core-modules/file-system");
    export default 

    methods: 
        onButtonTap() 
            console.log("Button was pressed");
             img_src:native_img
        ,
        onImgTap()
            alert("Dont press image !");

        
    ,

    data() 
        return 
            native_img:"https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"
        ;
    ,



</script>

<style scoped>
    .home-panel 
        vertical-align: center;
        font-size: 20;
        margin: 15;
    

    .description-label 
        margin-bottom: 15;
    
</style>

非常感谢任何帮助。！

问候， 〜哈利

【参考方案1】：

您的应用程序崩溃，因为您为变量 img_src:native_img 赋值不正确。 应该是，

onButtonTap() 
   console.log("Button was pressed");
   this.img_src=native_img;

在数据中也需要定义img_src:""

data() 
return 
 native_img:"https://play.nativescript.org/dist/assets/img/NativeScript_logo.png",
 img_src:""
     ;

同样在 html 中，src=img_src 到 :src=img_src

<Image :src="img_src" @tap="onImgTap" />

【讨论】：

非常感谢您的回复，一旦我进行了更改，它就会支持 native_img 未定义的错误，所以我进行了以下修改 this.img_src=this.native_img 但我仍然收到以下错误错误在 downloadBitmap - java.net.MalformedURLException：找不到协议：img_src

将语法 img=src) 更改为 :img=src.. 更新答案

我进行了更改，但图像不会显示，它已停止显示错误并且我的按钮按下已注册但图像不会弹出。这是我的项目的网址，我不确定您是否可以再次在线查看play.nativescript.org/?template=play-vue&id=11ouHV&v=2，非常感谢您的帮助

哈哈这个实时预览应用很酷，我测试过它实际上img_src 没有在data() 中定义native_img 被定义。 play.nativescript.org/?template=play-vue&id=11ouHV&v=4

很高兴它有帮助:)