Question

我在服务器中有6个产品名称和图像，我可以在UI中显示。这里的用户界面很好，但我的要求是将图片显示（base64字符串）显示到备受推崇的占位符中以供临时使用

<ul class="list">

           <li class="item" ng-repeat="i in products track by $index" ui-sref="leadProduct" >
                {{i}}
                <br>
                <br>
                <img ng-show="base64Array[$index] != undefined" ng-src="{{'data:image/png;base64,'+base64Array[$index]+imgURI}}" ng-err-src="http://placehold.it/100x100" ng-click="takePicture($index)">
                <img ng-show="base64Array[$index] == undefined" src="http://placehold.it/100x100" ng-click="takePicture($index)">
            </li>
        </ul>

这就是我习惯于显示阵列的方式，但我的ng-cordova相机功能是给予了爱。

$scope.takePicture = function() {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 75,
        targetWidth: 100,
        targetHeight: 100,
        destinationType: 0
    });

    function onSuccess(imageData) {
        console.log('success 1');
        $scope.imgURI = imageData;
        console.log('success 2');
        $scope.$apply();
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }
};

这里我可以调用我的相机功能，但我无法查看从相机拍摄的图像

Answer 1

试，

<img ng-show="base64Array[$index] != undefined" ng-src="data:image/png;base64,{{base64Array[$index]+imgURI}}" ng-err-src="http://placehold.it/100x100" ng-click="takePicture($index)">

Answer 2

刚刚离开，看到了这一点。如果您仍想在这里找到解决方案，那就是我所拥有的，它通过Ionic View为我工作。

//HTML
<ion-content ng-controller="someController">
      <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" alt="This is not working">
      <img ng-show="imgURI === undefined" ng-src="placeholder" alt="This is not working">
      <button class="button" ng-click="takePicture()" name="button">Take a Picture</button>
  </ion-content>


  //Controller
$cordovaCamera.getPicture(options).then(function(imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
}, function(err) {
});

你真的不需要“ALT”到图像，但我想添加它。

如何在占位符中显示ng-cordova相机墨迹图像

2 个答案: