NativeScript-vue 从 url 保存图片

Posted 2023-04-14

【中文标题】NativeScript-vue 从 url 保存图片

【英文标题】：NativeScript-vue Save Image from url

【发布时间】：2019-03-22 19:38:57

【问题描述】：

我想将图片从网络 URL 保存到设备上，谁能帮忙？ 我试过使用 imageSource 模块，但它只涉及来自本地设备的图像

【问题讨论】：

您可以编写一个 API 以将您的图像作为 json 中的 base64string 返回，并让您的应用使用应用程序设置来保存数据

你想在你的组件 html 中显示该图像吗？

【参考方案1】：

const imageSourceModule = require("tns-core-modules/image-source");
const fileSystemModule = require("tns-core-modules/file-system");



imageSourceModule.fromUrl(webURL).then((res) => 
    const folderDest = fileSystemModule.knownFolders.currentApp();
    const pathDest = fileSystemModule.path.join(folderDest.path, "test.png");
    const saved = res.saveToFile(pathDest, "png");
if (saved)  
    console.log("Image saved successfully!");
    this.image =  imageSourceModule.fromFile(pathDest);

感谢@Narendra Mongiya 的第一个答案，帮助从 url 获取图像

【讨论】：

很高兴知道@Nsagha！如果您将其标记为已接受的答案并投赞成票，则可能对其他人有所帮助。快乐编码！！

好的会这样做

【参考方案2】：

这就是你的代码应该是什么（我假设你的 webURL 返回 jpg/png 等）

const imageSource = require('image-source');
imageSource.fromUrl(webURL).then((res: any) => 
                           this.imageUrl = res;
        ).catch(err => 
            this.imageUrl = this.getIconSource('default_image');
        );

在html文件中

<Image [src]="imageUrl" loadMode="async"></Image>

如果 URL 返回空白，则默认图像

public getIconSource(icon: string): string 
        return isandroid ? `res://$icon` : 'res://images/' + icon;
    

【讨论】：

非常感谢，它获取了图像，但我不知道图像保存在哪里或是否保存到设备中，请再次说明这一点，谢谢