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

Question

所以我正在使用 JSON returns 很多关于用户的数据，包括图片。我面临的问题是，我相信图像文件夹的相对路径是正确的，但是由于某种原因，它在 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。当我在控制台和 html 上查看图像 src 时，它显示相对路径 /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 -> /images/profilePicture.png 以及从 home.tpl.html -> ../images/profilePicture.png.

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

注意： 我不确定这是否有用但是当我运行 g运行t 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

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

Angular JS using Grunt: Display images from local folder using relative path from JSON

json

angularjs

gruntjs

angularjs-directive