在AngularJS中使用包含base64数据的变量加载图像src

2024-04-17

使用包含变量加载图像base64AngularJS 中的数据

我正在尝试找到从包含的变量加载图像源的正确方法base64编码图像数据(例如使用从画布中提取toDataURL(); ).

起初我只是尝试这样:

<img src="{{image.dataURL}}" />

其中图像是带有变量的范围变量dataURL含有base64数据。这实际上工作得很好,唯一的问题是我得到了一个404我的控制台出现错误。像这样的事情:

GET http://www.example.com/%7B%7Bimage.dataURL%7D%7D http://www.example.com/%7B%7Bimage.dataURL%7D%7D404(未找到)

不太漂亮。当我尝试像这样更有棱角的风格解决方案时:

<img data-ng-src="image.dataURL" />

the images are not loading at all. I made a fiddle which you can find HERE http://jsfiddle.net/wilt/4LJDB/3/

有什么建议如何消除我的控制台中的此错误吗?


EDIT:

粗鲁的兔子是对的。这<img data-ng-src="{{image.dataURL}}" />工作中...

Working solution can be found HERE http://jsfiddle.net/wilt/4LJDB/5/


ng-src 的内容需要进行插值:试试这个:

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

在AngularJS中使用包含base64数据的变量加载图像src 的相关文章

  • 如何识别 YouTube 播放器的音量变化

    我正在使用 angualr youtube embed 指令将 YouTube 播放器嵌入到我的 Angular Web 应用程序中 因为我必须识别播放和暂停以及音量变化事件 为了监听播放和暂停事件 我使用下面给出的代码 scope on
  • 在模态中打开模态

    我有一个有角度的 ui 模态 其中有一个按钮 单击此按钮时 我想在 Angular ui 中打开另一个模式 我该怎么做 scope open function var modalInstance modal open templateUrl
  • 在 AngularJS 控制器之间共享数据,但共享数据来自 Ajax 调用

    我已经弄清楚如何在下面的示例中使用共享服务在两个 AngularJS 控制器之间共享数据 运行中fiddle http jsfiddle net antelopelovefan pPKzW 1 var app angular module
  • 当我的网页上有一个持续时间计数器时,AngularJS 有什么帮助吗?

    我有一个使用 Angular ui router 的应用程序 当路由器设置为某种状态时 我希望将计时器设置为例如 2 小时 当它设置为另一个状态时 我想让计数器倒计时 我希望在屏幕上显示剩余时间 有谁有关于如何实现此功能的代码示例吗 如果有
  • 使用 Phaser.js 和 Ionic 开发游戏应用程序(渲染缓慢/不稳定)

    只是为了让您知道 以防有人想要开发 我使用 Phaser js 开发了一个游戏应用程序 我将代码放入 Ionic 空白启动应用程序中 所以基本上视图是使用 Ionic 应用程序渲染的 然后 Phaser 通过 id 选取 div 并显示游戏
  • Angular JS 在调用新的 $http 之前取消 $http 调用

    在 Angular JS 1 1 5 中 您可以取消之前启动的 http 调用 这两个link1 https stackoverflow com questions 16962232 in angularjs how to stop ong
  • 为什么在这个函数定义中像这样使用“window.angular”?

    我正在尝试理解一个我需要用来与 Django 集成的 angularjs 文件 它有一个我不熟悉的奇怪语法 请记住我是一名初级开发人员 所以这可能是你的面包和黄油 它是这样的 function angular undefined use s
  • 选择器的内部文本

    我尝试从此标记中获取内部文本 span class ng binding ng scope Displaying results 1 25 of 17 430 span 使用此选择器 document querySelectorAll di
  • 在 History popstate 事件中获取 AngularJs $scope?

    我是 angularjs 开发新手 我有 var app angular module myapp app controller ProductCtrl scope sce function scope sce scope products
  • Angularjs 模式的复选框表现得很奇怪

    我有一个有角度的应用程序plunker http plnkr co edit rac8w9g8L0eX8mlXKuVn p preview 当我们单击该按钮时 它会打开一个包含项目列表的模式对话框 其中 2 项是根据复选框表输入中的条件进行
  • Angular 1.0.8 $resource 具有多个可选的获取参数

    我的学生 url 如下所示 var Student resource app student studentid courseId studentid id courseId cid 当我不带参数调用它时 我希望 url 为 app stu
  • Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers

    我试图通过发布请求将文件发送到我的服务器 但是当它发送时会导致错误 Access Control Allow Headers 不允许请求标头字段 Content Type 所以我用谷歌搜索了错误并添加了标题 http post rootSc
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 找到图像特征宽度的正确方法和Python包

    输入是一个在黑色背景上带有彩色 抱歉 垂直线的光谱 给定该带的近似 x 坐标 用 X 标记 我想找到该带的宽度 我对图像处理不熟悉 请引导我前往正确的方法图像处理和Python图像处理package也能起到同样的作用 我认为 PIL Ope
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl
  • 如何销毁角度工厂实例

    一方面 我有几个工厂 每个工厂都控制一个 websocket 另一方面 其中一个工厂应该在客户端登录时启动 因此 if user isLogged injector get NotificationsWebsocket 这就是我动态初始化工
  • 将 UUID 存储为 base64 字符串

    我一直在尝试使用 UUID 作为数据库键 我希望占用尽可能少的字节数 同时仍然保持 UUID 表示形式的可读性 我认为我已经使用 base64 将其减少到 22 个字节 并删除了一些尾随的 这些 对于我的目的来说似乎没有必要存储 这种方法有
  • 如何正确清理来自 AngularJS 控制器的无效输入的表单?

    我有一个 AngularJS 表单 其中包含 除其他字段之外 类型之一url 后者很重要 因为这会强制相应的输入成为有效的 URL 在某些条件下 例如 要关闭具有此类表单的模式对话框 我想以编程方式清除该表单 为此 我实现了方法reset基
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如

随机推荐