使用AngularJs加载图像

Load image using AngularJs

本文关键字：图像 加载 AngularJs 使用      更新时间：2023-09-26

我使用angularjs和bootstrap创建了一个简单的网站。在一个页面中，我加载了一个静态图像，并使用bootbox设置了一些按钮。

当我在本地运行我的网站使用

grunt serve

我看到这个按钮的图像。当我尝试使用

运行我的网站时
http-server -p 9000

我看不到图像，我只看到底部。

这是我的代码加载图像和按钮在HTML页面:

<div class="row">
    <div class="col-lg-12">
        <img src="../maps/MappaWifi.jpg" alt="img_source" title="img_source" style='height: 100%; width: 100%; object-fit: contain'>
        <button class="btn btn-primary btn-xs Arduino1ZN" alt="Arduino1ZN" ng-click="mapsPageCtrl.Arduino1ZNCtrl()">Arduino1</button>
        <button class="btn btn-primary btn-xs Arduino2ZN" alt="Arduino2ZN" ng-click="mapsPageCtrl.Arduino2ZNCtrl()">Arduino2</button>
    </div>
</div>

我认为问题在于我在哪里设置了路径。谢谢大家的帮助。

我想你把文件夹指向了错误的路径。因此，您可以尝试像下面的代码一样设置您的src，它应该可以正常工作。正如你提到的，你的地图文件夹是/home/jarvis/documents/server/app/iot/maps，我假设你的根文件夹是/home/jarvis/documents/server，那么相对于你的根，地图文件夹应该是这样的:

<img src="iot/maps/MappaWifi.jpg" ...
相关文章：