Question

我试图在我的离子应用程序中显示基本64位图像。我从服务器获取图像，我需要在滑块中显示这些图像。

   <ks-swiper-slide class="swiper-slide" ng-repeat="(cKey,cValue) in 
     value.CHAPTER">
                        <div ng-click="chapters({{cValue.CHAPTER_ID}} , '{{cValue.CHAPTER_NAME}}')" class="hm-outbox-first"> 
                            <div  ng-class="getClass({{value.SUBJECT_ID}})" > 
                                <img data-ng-src="{{cValue.IMAGE}}"  />   
                            </div>
                            <div class="hm-bottombox">
                                <p ng-class="getSubClass({{value.SUBJECT_ID}})" > {{cValue.CHAPTER_NAME| truncatelimit:28}}  </p> 

                            </div>
                        </div>
                    </ks-swiper-slide>

我已经尝试过data-ng-src，ng-src和src来显示。它们在HTML中可用，因为我在检查代码时可以看到它们。当我使用我的应用程序中可用的图像时，这工作正常。但是从服务器这不起作用。我试着搜索没有找到任何东西的问题。在此先感谢您的帮助。或者我做错了什么。

Answer 1

我从一个解决方案中得到了答案 'img-src' was not explicitly set, so 'default-src' is used as a fallback

我需要在index.html中添加该行

    <meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">

Answer 2

为图像添加高度和宽度

<img data-ng-src="{{cValue.IMAGE}}" style="height: 200px;width:100px" />

并为外部容器添加ng-if

<ks-swiper-slide ng-if="value.CHAPTER" class="swiper-slide" ng-repeat="(cKey,cValue) in 
     value.CHAPTER">
</ks-swiper-slide>

Answer 3

data-ng-src="data:image/png;base64,{{cValue.IMAGE}}"

base64图像没有显示

3 个答案: