2016-09-20 78 views
0

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

我让你我的代码在这里

主视图model.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; 

主page.xml

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

如果下面的答案之一回答了你的问题,这个网站的工作方式,你会“接受”答案,更在这里:*** [当有人回答我的问题,我该怎么办?](http: //stackoverflow.com/help/someone-answers)***。但前提是你的问题确实得到了回答。如果不是,请考虑在问题中添加更多详细信息。 – FrankerZ

回答

0

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

0

使用img而不是imageviewModel.set()

//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); 
0

在功能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; 
} 

希望这有助于。

相关问题