在 NativeScript 中显示来自 sdcard 的图像答案

【问题标题】：Display an image from sdcard in NativeScript在 NativeScript 中显示来自 sdcard 的图像
【发布时间】：2016-09-20 15:00:41
【问题描述】：

我想用 NativeScript 开发一个简单的应用程序，它显示存储在 sdcard 存储中的图像数组。我可以使用 NativeScript 的“文件系统”模块访问这些文件，但我无法显示它。

我在这里给你我的代码

主视图模型.js

var fs = require("file-system");
var imageModule = require("ui/image");
var Observable = require("data/observable").Observable;
var imageSource = require("image-source");




var mediaFiles=[];
var cont=0;
var viewModel;
function createViewModel() {
    viewModel = new Observable();
    var sdcard = fs.path.join(android.os.Environment.getExternalStoragePublicDirectory(android.os.Environment.DIRECTORY_DCIM).getAbsolutePath(), "Camera");
    var folder = fs.Folder.fromPath(sdcard);
    folder.getEntities()
    .then(function (entities) {
        // entities is array with the document's files and folders.
        entities.forEach(function (entity) {
            if (entity.extension==".png" || entity.extension==".jpg" ){
                mediaFiles.push(entity.path);
            }
        });
        //transicion();
    }, function (error) {
    });
}
function transicion() 
{ 
    //while (cont < mediaFiles.length){
    cont++;
    mostrarImagen(mediaFiles[cont]);
    //transicion() 

}
function mostrarImagen(ImagePath){
    console.log("muestro imagen "+ ImagePath);
    var img = imageSource.fromFile(ImagePath);
    console.log(JSON.stringify(img));
    viewModel.set("image", image);
    page.bindingContext = viewModel;

    //if (cont<mediaFiles.length-1)
  //  setTimeout("transicion()",2000);
}
exports.createViewModel = createViewModel;

主页.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Portaretratos" class="title"/>
       <Image src="{{ image }}" />
    </StackLayout>
</Page>

【问题讨论】：

如果以下答案之一回答了您的问题，本网站的运作方式，您将“接受”答案，更多信息请点击此处：What should I do when someone answers my question? 。但前提是你的问题真的得到了回答。如果没有，请考虑在问题中添加更多详细信息。

标签： android xml image nativescript

【解决方案1】：

在您的viewModel.set() 中使用img 而不是image：

//You're creating 'img' here
var img = imageSource.fromFile(ImagePath);

//Logging 'img' here
console.log(JSON.stringify(img));

//And using 'image' here. (Use img instead)
viewModel.set("image", image);

【讨论】：

【解决方案2】：

在函数mostrarImagen(ImagePath)中，这样做：

var ImageModule = require("ui/image"); 
function mostrarImagen(ImagePath){
    var img = new ImageModule.Image();
    img.imageSource = imageSource.fromFile(ImagePath);
    viewModel.set("image", img.src);
    page.bindingContext = viewModel;
}

希望这会有所帮助。

【讨论】：

【解决方案3】：

尝试将viewModel.set("image", image);改为viewModel.set("image", ImagePath);

【讨论】：