Question

所以我使用的JSON返回了很多关于用户的数据，包括图片。我面临的问题是我相信图像文件夹的相对路径是正确的，但由于某种原因，它在ng-source="relativePath"而不是图像中说。我可以得出的唯一结论是路径错误或者我必须对项目中使用的图像进行某种导入。

<div ng-repeat="results in userInfo.images">
  <figure class="img">
    <img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
  </figure>
</div>

我尝试过source，ng-source和data-ng-source。当我在控制台和图像src的html中查看时，它显示相对路径/images/profilePicture.png。

我的项目具有以下结构：

Repositry Name
   app
   css
   home
     home.module.js
     home.tpl.html
   images
     profilePicture.png
   js
   resources
   app.js
   index.html

使用最佳实践，index.htlm是单页面应用程序的容器。我们正在使用注入index.html容器页面的home.tpl.html页面。

我尝试直接从index.html切换路径 - ＆gt; /images/profilePicture.png以及来自home.tpl.html - ＆gt; ../images/profilePicture.png。

我找不到任何与我的情况相关的帖子，但我相信您可能需要app.use或某种注入方法来添加图像文件夹才能使用？

注意：我不确定这是否有用但是当我运行grunt build而不是serve时我检查 dist 文件夹并且图像文件夹确实包含了所有内容图像。

Answer 1

将您的<img data-ng-source声明更改为仅使用ng-src：

<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />

w3schools的更多细节：ng-src

使用Grunt的Angular JS：使用JSON的相对路径显示本地文件夹中的图像

1 个答案: