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

So I am using a JSON that returns a lot of data about the user including pictures. The problem I am facing is that I believe the relative path to the images folder is correct however for some reason it is saying in ng-source="relativePath" instead of the image. The only conclusion I can come to is either the path is wrong or there is some sort of import I must do for the images to be used in the project.

所以我使用的JSON返回了很多关于用户的数据,包括图片。我面临的问题是我相信images文件夹的相对路径是正确的,但是由于某种原因它在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>

I have tried source, ng-source, and data-ng-source. When I view in console and on the html for image src it shows the relative path /images/profilePicture.png.

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

My project has the following structure:

我的项目有以下结构:

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

Using best practices the index.htlm is the container for the single page application. We are using the home.tpl.html page that is injected into the index.html container page.

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

I have tried switching the path to go directly from index.html -> /images/profilePicture.png as well as from home.tpl.html -> ../images/profilePicture.png.

我试过直接从index.html - > /images/profilePicture.png以及home.tpl.html - > ../ images/profilePicture.png切换路径。

I could not find any posts relevant to my situation but I believe perhaps you need an app.use or some sort of injection method to add the folder of images to be able to be used?

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

Note: I am not sure if this is helpful however when I run grunt build instead of serve I check the dist folder and the image folder does in fact have all of the images.

注意:我不确定这是否有用然而当我运行grunt构建而不是服务时我检查dist文件夹并且图像文件夹确实具有所有图像。

1 个解决方案

#1

Change your <img data-ng-source declaration to just use ng-src:

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

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

More details at w3schools: ng-src

w3schools的更多细节:ng-src

#1