javascript - 需要将包含img url的Json链接放在

转载 作者：行者123 更新时间：2023-12-03 07:04:34 26 4

我目前正在使用 Firebase 和 Ionic 构建移动应用程序，我必须使用 firebase 的 json 链接，该链接在我的 html img ng- 中包含图像 url源代码。

这是Json link包含图像的 URL。

我想将此链接放入 img 并获取此 json 链接中包含的 url ("https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAAA/4252rscbv5M/photo.jpg")并显示图像，但我不知道该怎么做？

这是到目前为止我在 html 中得到的内容。

<img src="'https://wellesleytesting.firebaseio.com/userProfile/userimg.json'" />

任何帮助将不胜感激!谢谢!

最佳答案

您必须对 json 链接发出 http 请求，该请求将向您发送图像链接作为响应。

$http.get("https://wellesleytesting.firebaseio.com/userProfile/userimg.json")
.then(function(response) {
    $scope.imgSrc = response.data;
    $scope.imgSrc = JSON.parse($scope.imgSrc)        
});

收到回复后，您必须像这样解析它:

$scope.imgSrc = JSON.parse($scope.imgSrc) 

最后使用 ng-src 属性将其绑定(bind)到您的 html:

<img ng-src="{{imgSrc}}"/>

Demo

关于javascript - 需要将包含img url的Json链接放在<img ng-src中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36884472/

26 4 0

• javascript - 获取图像 src 如果有多个则获取图像 src 只获取一张图像 src

  我正在尝试使用 jquery 获取图像 src，如下所示: HTML Javascript var imageSrc = $('.post_container img').attr('s

• android - 在 [src/nullnull/debug, src/debug/nullnull, src/nullnull, src/debug, src/nullnullDebug] 中找不到 google-services.json

  我遇到错误，无法完成构建。我搜索了 Stackoverflow 和 Github。我已经尝试了很多方法，但我无法修复。请帮忙。 (1) 在 [src/nullnull/debug, src/debug

• javascript - if img.src === img.src === img.src - 无法让它工作

  我正在尝试使用图像制作一款类似 Match3 的游戏，但我无法进行比较。我正在为固定数量的 atm 执行此操作，只是为了让它正常工作，稍后应该在 foreach 循环中。如果有什么区别的话，该函数位于

• javascript - 如何将 Angular ng-src 的输出从 'src' 属性更改为 'data-src' ？

  我正在使用 jquery 插件 OwlCarousel，在我的一个 View 中使用 ng-repeat 场景，如下所示: 它运行良好，并为轮播中的每个项目输出以下标记: 有没

• java - 双边过滤错误，断言失败 ((src.type() == CV_8UC1 || src.type() == CV_8UC3) && src.data != dst.data)

  我的代码如下所示: Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.image1); int wi

• javascript - 如何使用指令用新的后备 src 更新 src？

  如果未找到 src，我将使用 Angular 指令作为后备 url 作为名称首字母 指令 (function () { 'use strict'; angular .m

• javascript - 获取 SRC 本身包含特定单词的脚本标签的完整 src

  我是构建 chrome 扩展的新手，从一个小项目开始，我需要在弹出窗口中打印“构建版本”。构建版本被附加到 JS/CSS 资源中，如下所示: 需要从脚本 src 值中提取“6.0”。你能帮我看看如何

• src/app/reactive-form/reactive-form.component.html:47:48 - error TS2531: Object is possibly 'null'. src/app/reactive-form/reactive-form.component.ts(Src/app/reactive-form/reactive-form.component.html:47:48-错误TS2531：对象可能为‘Null’。Src/app/reactive-form/reactive-form.component.ts)

  类型‘AbstractControl’上不存在属性‘Controls’。

• angularjs - ng-src 与 src 的使用

  这个tutorial演示如何使用指令 ngSrc 而不是 src : 他们要求: Replace the ng-src directive with a pl

• javascript - 更改 src 并获取新 src 的高度

  我正在创建一个包含多个图像的图库，您可以在其中单击一个小缩略图，然后将打开该图像的更大版本。 打开后，如果您移动光标，图像将在 y 轴上跟随您。类似于 https://www.zara.com/es/

• javascript - 文档 [] - src.charAt - src.length

  文档[] src.charAt src.length 这三样东西是什么？ 我确定 pixState 会给我 1 或 0； var pixState = document[imgName].src.ch

• javascript - Ng-src 更新但 src 在删除照片时不更新

  问题背景: 我正在使用这个问题的解决方案:How to update AngularJS view when the value has not changed?所以在我看来我有: 当我更改照片时

• php - 如何用正则表达式替换 data-src 的 src？

  我在 html 中有整个页面，在输出之前我想将所有 img src 替换为 data-src我正在使用 return (preg_replace('~]*\K(?=src)~i','data-',

• android - 差异 : android:src and tools:src?

  Difference(s): android:src and tools:src? 如果有的话，什么时候使用 tools:src 而不是 android:src 是合适的？ 最佳答案 如果您在运行时在

• javascript - 如何检查脚本 src 匹配，然后重新分配 src

  我需要检查每个 script 标签的 src 值，如果匹配，我想更改该脚本标签的 src 属性...像这样: var scripts = document.getElementsByTagName("

• html - src 和 data-src 属性之间有什么区别？

  使用 img 标签的 data-src 或 src 属性有什么区别和后果(好的和坏的)？我可以使用两者获得相同的结果吗？如果是这样，应该什么时候使用它们？ 最佳答案 属性 src 和 data-src

• image - Vue img src 路径与 :src 不一样

  我使用 Vue。我尝试输出图像，当我使用 src 时效果很好，但当我使用 :src 时效果不佳。 作品 不起作用 我试过但没有用 @ 在路径的第一个。 ~ 路径中的第一个。 ./ 在路径的第一个。

• javascript - $(this).src 和 document.getElementById().src 之间的区别？

  在当前项目中我正在使用 jQuery。我只是想知道为什么会这样， $('#homeIcon').hover(function(){ document.getElementById('homeI

• Java 正则表达式匹配 src ="abc"或 src ='abc'

  我在严格的 Java 环境中。 所以这个问题并不像标题中那么简单，我不是要解决我遇到的问题，它更理论化，以获得更好的知识。 我感兴趣的是用双引号或单引号匹配 src，但如果是双引号，它也必须用双引号结

• mysql - SQL查询替换部分HTML(iframe src ="http://to iframe src="://)

  我有一个 Joomla 2.5.28，现在使用 https 而不是 http。 一些文章(很多)包含来自 Vimeo 的嵌入视频。 最初，这些视频是使用http嵌入的，所以现在我的数据库中有字段int