Angular URL“trustAsResourceUrl”不起作用

2024-03-19

我在用着角度文件上传.js https://github.com/nervgh/angular-file-upload并上传图像。上传成功后,它会返回图像托管位置的 URL,该图像在 Azure 上作为 blob 托管。 上传成功,并且正确返回 URL,但是当我将此 URL 推送到“图像”堆栈以在浏览器中查看此图像时,它无法正常工作。例如,我返回的 URL 如下所示:

"https://searlesmedia.blob.core.windows.net/event-images/4_slide-archive.jpg"

控制器.js

uploader.onSuccessItem = function (fileItem, response, status, headers) {
    console.info('onSuccessItem', fileItem, response, status, headers);
    $scope.uploadcomplete = "Upload Successful";
    var url = $sce.trustAsResourceUrl(response);
    $scope.images.push(url);
};

Html

<div class="row" data-ng-repeat="image in images">
    <img ng-src="{{image}}" class="img-responsive" />
</div>

您好,您似乎错过了一些东西,请参阅此处:http://plnkr.co/edit/1PpscI4dOMYpYRf6fbUS?p=preview http://plnkr.co/edit/1PpscI4dOMYpYRf6fbUS?p=preview

angular.module('mySceApp', ['ngSanitize'])
  .controller('AppController', ['$http', '$scope', '$sce',
    function($http, $scope, $sce) {

      $scope.image = {};
      $http.get("test_data.json").success(function(data) {
        console.log(data.url);
        // $scope.userComments = userComments;

        $scope.image.url = $sce.trustAsResourceUrl(data.url);
      });

    }
  ]);

HTML:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example64-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>

<body ng-app="mySceApp">
  <div ng-controller="AppController as myCtrl">



    <div class="well">

      <b>{{userComments.name}}</b>:

      <img ng-src="{{image.url}}">
      <br>

    </div>
  </div>
</body>

</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular URL“trustAsResourceUrl”不起作用 的相关文章

  • AngularJS - 将文本格式从 JSON 返回到标题大小写

    我有一个从 JSON 文件检索数据的服务 数据内有些数据全部为大写 例如 scope FootballClubs CompanyName MANCHESTER UNITED LIVERPOOL FOOTBALL CLUB CHELSEA W
  • 如何使用 htaccess 将所有请求重定向到反应或角度索引?

    我正在使用react router 在react 中创建一个应用程序 早些时候 我对 Angular 做了同样的事情 但在这两种情况下 如果用户为 URL 添加书签并直接加载它 它将显示 404 错误 我们可以在 htaccess 中创建这
  • 循环遍历数组并删除项目,而不中断 for 循环

    我有以下 for 循环 当我使用splice 要删除一个项目 我发现 秒 未定义 我可以检查它是否未定义 但我觉得可能有一种更优雅的方法来做到这一点 我们的愿望是简单地删除一个项目并继续 for i 0 len Auction auctio
  • jQuery 可以操作插入的元素吗?

    我是 jQuery 的新手 我认为 jQuery 可以操作由代码添加的元素是合理的 但我发现现在还不能 function addVideo click function publisher append div div
  • React中如何触发同级组件的函数?

    I am new to front end world and could not figure out how to trigger a function from a sibling component Lets say I have
  • 如何将“X-Content-Type-Options: nosniff”添加到我的网络服务器的所有响应标头中

    我正在运行一个 apache 网络服务器 我想将 X Content Type Options nosniff 添加到来自我的网络服务器的所有响应标头 我怎样才能做到这一点 是否可以通过更改 apache 配置文件来实现此目的 确保 mod
  • Visual Studio 改变 Ctrl-K-D 的工作方式

    In Visual Studio I m using 2012 is there any way of editing the way that Ctrl K D combinations handles its Auto Formatti
  • 在自动完成上添加 jQuery 延迟

    我正在尝试为应用程序创建 jQuery 自动完成 search input on keyup function search this val autocomplete div autocomplete get ajax search se
  • Pjax动画

    我终于让 pjax 工作了 但我还有另一个问题 如何添加一些 jquery 动画 如淡出 幻灯片旧内容和淡入 幻灯片新内容 默认情况下 pjax 只是更改内容 没有任何好看的效果 任何帮助将非常感激 此致 基本上 你有一堆事件 https
  • 为什么函数声明在不同浏览器中的处理方式不同?

    虽然我在谷歌中找不到对此的引用 但我熟悉这样一个事实 在 javascript 中 全局函数声明在执行任何代码之前都会被解释 换句话说 这工作得很好 f function f 但是 我注意到 chrome 和 firefox 对全局函数声明
  • 冒泡可用于图像加载事件吗?

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像
  • 非法使用break语句; javascript

    当这个变量达到一定数量时 我希望循环停止 但我不断收到错误 未捕获的语法错误 非法的中断语句 function loop if isPlaying jet1 draw drawAllEnemies requestAnimFrame loop
  • 如何按 Angular 表中的属性(该属性具有单个 rownspan)进行分组?

    我没有找到这个问题的合适标题 我的问题是 例如 我有一个包含两列的表 列汽车品牌和列汽车型号 我希望表是 like in this picture 换句话说 品牌名称只会出现 1 次 我的输入数组采用以下 json 格式 brand Aud
  • 如何在新窗口中打开图像或pdf文件?

    我有一个 gridview 它包含文件名和文件路径 图像和 pdf 格式文件 其中我使用了模板字段 在该字段下放置了 1 个图像按钮 单击该图像按钮 即 查看 按钮 时 我想在新窗口中打开所选文件 这是我的代码 protected void
  • 标记(Markdown)+ Mermaid(流程图和图表)

    努力去争取 美人鱼 https github com knsv mermaid https github com knsv mermaid跟 共事 标记 https github com chjj marked https github c
  • 绘制多边形

    我正在使用 Google Maps API V3 根据路径绘制多边形 该路径是随机未排序坐标点 LatLng 的数组 这会产生以下形状 Polylines intersect Problem 由于多边形的形状取决于路径中点的顺序 因此如何对
  • 将两个数字相加将它们连接起来而不是计算总和

    我将两个数字相加 但没有得到正确的值 例如 做1 2返回 12 而不是 3 我在这段代码中做错了什么 function myFunction var y document getElementById txt1 value var z do
  • 使用 File API polyfill 读取数据 URL

    我正在尝试使用文件 API 库 https github com mailru FileAPI https github com mailru FileAPI 作为不支持文件 API 的浏览器的后备 以便将文件作为数据 URL 读取并将其传
  • 如何获取符号名称(文字)?

    以下情况 var myVehicle brand Tesla var isMoving Symbol var currentStatus Symbol myVehicle isMoving true myVehicle currentSta
  • $ 在 JQuery 中意味着什么

    在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思 是对象吗 是一个别名jQuery对象 函数 它充当

随机推荐

  • 在表格中显示*

    我有2张桌子 一个称为用户 另一个称为电视节目 用户表有 users id 显示名称 用户名和密码 我有一个名为 users id 的外键 在电视节目表中我有 tv id users id FK tvshow seasons 我希望能够显示
  • Android:通知中的新信息替换旧信息

    来自文档 http developer android com reference android app NotificationManager html notify 28java lang String 20int 20android
  • 每当我的邮件在 phpmailer 中变成垃圾邮件时

    这是我发送邮件的代码 fullname POST fullname email POST email telephone POST telephone email POST email date POST date time POST ti
  • 从查询字符串中检索值?

    如何在 JSP 中使用表达式语言检索查询字符串参数的值
  • “对于聚合函数无效的范围参数”是什么意思?

    表达方式 FormatNumber Avg CInt Code FirstSplit Fields AvgLOSC4 Value 0 0 当我尝试在 SSRS 管理器中更新报告时 会出现以下错误消息 文本框 textbox16 的值表达式具
  • 当在 tmux 会话中打开的 vim 进程上移动光标时,为什么它时不时地会留下幽灵字符的痕迹 - ^[OB,^[OA?

    如果我向上翻页和向下翻页 这些就会消失 为什么会发生这种情况以及如何纠正 https i stack imgur com DnMYl png https i stack imgur com DnMYl png 我最近摆弄了我的 vimrc
  • 如何使用 CodeDOM 在 AppDomain 中创建和加载程序集?

    我正在开发一个项目 该项目将使用 CodeDOM 创建一个类 该类计算用户定义的表达式 为该类创建程序集并加载该程序集 由于可能有相当数量的用户定义表达式 我想首先创建一个 AppDomain 执行 CodeDOM 创建 加载并执行该 Ap
  • 如何在 OpenLayers 4 上添加点击事件?

    我需要将事件侦听器附加到 OpenLayers 4 中的功能 我已经尝试过feature on 点击 function 但它不起作用 如何将晒黑事件添加到功能中 先感谢您 没有click为功能注册的事件ol Feature目的 但click
  • 包含第一个元素的反转数组切片[重复]

    这个问题在这里已经有答案了 假设我有 gt gt gt a 1 2 3 4 我想要一个反转的切片 假设我想要给出第 1 个和第 0 个元素start idx 1 and stop idx 0 2 1 使用切片符号 a x y z 我用什么值
  • 音乐播放列表数据库设计

    如何构建歌曲和播放列表的表格 我的想法是创建一个播放列表标题和 id 的表 然后创建一个播放列表歌曲表 其中保存歌曲的唯一 id 及其所属的播放列表 另一个为每个播放列表规划一个新表 并将播放列表的歌曲信息存储在每个表中 这是一个好方法还是
  • GenyMotion 无法启动 Genymotion 虚拟设备

    当我运行 Genymotion 时 出现以下错误 无法启动 Genymotion 虚拟设备 无法为虚拟设备配置网络适配器 请检查以下几点 在 VirtualBox 中 在软件的主要参数中 检查是否存在 Host only 网络适配器 在 V
  • C 字符值算术

    我一直在阅读 C 编程语言 一书来学习 C 我偶然发现了算术s i 0 他们说它给出了存储在 s i 中的字符的数值 我不太明白 它怎么能通过减法给出值呢 注意 这用在 atoi 函数中 该函数将数字字符串转换为其等价的数字 谢谢 可能重复
  • 如何通过命令行关闭Android模拟器

    我无法从命令提示符正常停止模拟器 我使用的是 Linux Ubuntu v10 04 64 位 和 Android v2 3 API 9 Gingerbread 我使用其快照启动了模拟器 现在我关心的是优雅地关闭正在运行的模拟器实例 我尝试
  • 手机应用程序设计指南[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否有包含创建移动电话应用程序的设计指南的文档或文章 如何构建应用程序以获得理想的用户体验 用户界面和键
  • 通过API重置登录cookie

    我想知道是否有任何方法可以通过API重置登录cookie 我知道如何通过管理中的设置来做到这一点 切换changePasswordAtNextLoginG Suite 用户的标记将其从所有设备中注销 使changePasswordAtNex
  • 如何使用 JsTestDriver 测试 jquery 和 ajax 调用?

    我有一个用 jQuery 构建的动态页面 Html 片段加载自mustache http mustache github com 模板 这些模板是从 URL 下载的 我想对整个 html 结构进行单元测试 JsTestDriver 测试是
  • 并发数据库访问给出 IllegalStateException

    我正在尝试为 1 个方法生成一个线程 我得到一个IllegalStateException 见下文 该方法的作用是接受与数据库的连接和数据库名称 并从中生成 XML 这部分有效 我只是想用一个新线程让它运行得更快 因为我有多个 XML 文件
  • Foreach 循环中的多个变量 [PowerShell]

    是否可以将两个变量放入 Foreach 循环中 以下是针对 PowerShell ASP 的编码 我的 Foreach 循环中的语法不正确 但您应该能够破译我试图构建的逻辑 list Get QADUser userid includeAl
  • XCTest:运行测试失败,且 Cycle inside X;在使用 CocoaPods 和 Carthage 的项目中,构建可能会产生不可靠的结果

    将我的项目升级到 Xcode 12 后 测试套件停止工作 测试目标无法编译 失败并显示 Cycle inside
  • Angular URL“trustAsResourceUrl”不起作用

    我在用着角度文件上传 js https github com nervgh angular file upload并上传图像 上传成功后 它会返回图像托管位置的 URL 该图像在 Azure 上作为 blob 托管 上传成功 并且正确返回