Question

此代码工作正常在Img标签中显示图像

$scope.isImage = function(ext) {
  if(ext) {
    return ext == "jpg" || ext == "jpeg"|| ext == "gif" || ext=="png"
  }
}

以下是工作演示http://plnkr.co/edit/rAZVSFRURCkgxQrZAtvO?p=preview

我想在

中显示图片

<div style="background-image:url(How can i get browsed image file)"></div>

Answer 1

您需要在DOM中创建一个路径字符串来表示您浏览的文件，然后将其添加为背景图片网址。我通过修改下面的代码来实现它。

<body>
    <form action="" id="contactproForm" method="post" ng-app="myApp" ng-controller="myCtrl" enctype="multipart/form-data">

        <label for="file">Attachment</label>
        <div class="input-box">
          <input type="file" id="file" class="input-text" ngf-change="onChange(picFile)" ngf-select ng-model="picFile" name="attachement" accept="image/png, image/jpeg, image/jpg, application/msword, application/vnd.ms-excel, application/pdf " />
        </div>
        <div id="image"class="image" style="width:200px;height:200px;background-image:url('');"></div>       <!-- div with id="image"-->

    </form>


    <script>
    var app = angular.module('myApp', ['ngFileUpload']);

    app.controller('myCtrl', ['$scope', '$http', '$timeout', '$compile', 'Upload',
        function($scope, $http, $timeout, $compile, Upload) {
            $scope.onChange = function(files) {
                if (files[0] == undefined) return;
                if($scope.isImage(files[0].name.split(".").pop())){  // checking if image
                    var path = URL.createObjectURL(files[0]);       //  creating a path for file
                    document.getElementById('image').style.backgroundImage = "url(" + path + ")";   // setting it as background image of div
                }else{
                    alert("not Image");
                }
            }

            $scope.isImage = function(ext) {
                if (ext) {
                    return ext == "jpg" || ext == "jpeg" || ext == "gif" || ext == "png"
                }
            }
        }
    ]);
    </script>

</body>

我已为所做的更改添加了评论。

Answer 2

使用ng-style代替这样的样式并替换图片网址。

纳克式=＆＃34; {＆＃39;背景图像＆＃39;：＆＃39; URL（https://www.google.com/images/srpr/logo4w.png）＆＃39;}＆＃34;＆GT;

如何使用Angular Js在Div中显示图像

2 个答案: