Search code examples
rubydashing

Example of an update-able image in dashing dashboard

I have taken the dashing sample dashboard and added some widgets - two Image and one BigImage widgets:

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="image2" data-view="Image" data-image="images/image2.jpg" title="Image2" data-link='abc' style="background-color:#ff9618"></div>
    </li>
    <li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
  <!-- <div data-id="picture" data-view="BigImage" data-image="file:///shared/images/aura0.jpg" -->
  <div data-id="picture" data-view="BigImage" data-image="https://www.google.com/images/nav_logo195_hr.png"
    style="background-color:transparent;"
    data-max="true"
  ></div>
</li>

The placeholder for the widgets do show up but the images do not:

enter image description here

When I click the following occurs:

enter image description here

Clearly I am missing some plumbing - and some basic concepts here. A pointer to a gist or similar would be appreciated.

Solution

  • You have to use images that are served up somewhere that a browser can load them. The easiest way to do this is to put your images into assets/images and then link to them at assets/my-image.jpg like this:

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  <div data-id="logo" data-view="Image" data-image="assets/my-image.jpg"></div>
</li>

    Also, the reason why you get that error when you click on one of them is you have defined data-link='abc', which is creating a link to /abc. This doesn't exist and so Dashing is giving you a 404.