使用 AngularJs 加载图片

Question

我使用 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>

我认为问题出在我设置路径的地方。感谢大家的帮助。

Answer 1

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

<img src="iot/maps/MappaWifi.jpg" ...

使用 AngularJs 加载图片

Load image using AngularJs

javascript

angularjs

angularjs-scope

angularjs-controller