Load image using AngularJs

Question

I have create a simple web site using angularjs and bootstrap. In one page, I load a static image and I set some botton on this using bootbox.

When I run in local my site using

grunt serve

I see the image with the button on this. When I try to run my site using

http-server -p 9000

I can't see the image, I see only the bottom.

This is my code that load image and button in the HTML page:

<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>

I think that the problem is where I set the path. Thanks all for help.

Answer 1

I think you are pointing your folder to the wrong path. So, you can try setting your src like the below code and it should work fine. As you mentioned your maps folder is /home/jarvis/documents/server/app/iot/maps I'm suposing it's your root folder is /home/jarvis/documents/server, then in relation to your root the maps folder should look like:

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