Hi,
I want to add a background image for this website. The image is on my local computer. How to i reference to it in node red and also when it is published how can that image be available to everyone. How do i make the image public on node red.
Below is my flow.
[{"id":"bd1f3c8f0f1d6e12","type":"template","z":"95c455e1841b6220","name":"index","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html class=\"desktop-menu-open\" lang=\"en\" theme=\"dark\">\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n \n\n\n <script src=\"https://cdn.jsdelivr.net/npm/js-yaml@3.11.0/dist/js-yaml.min.js\"></script>\n <!-- jQuery from CDN -->\n <script src=\"https://unpkg.com/dayjs\"></script>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <!--Vue and Axios and Lodash Javascript-->\n <script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/vue-fragment\"></script>\n <script src=\"https://unpkg.com/vue-form-json-schema\"></script>\n <script>\n Vue.use(Fragment.Plugin);\n </script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js\"></script>\n\n <!--EU4IA's Basecoat Vue Components Javascript-->\n <!--<script src=\"https://unpkg.com/@eu4ia/bc-components\"></script>-->\n <script src=\"https://unpkg.com/@eu4ia/bc-components@0.0.45/dist/BasecoatComponents.umd.js\"></script>\n <!--Chart js-->\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1\"></script>\n \n <!--<script src=\"https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js\"></script>-->\n\n <!--Vue Table-->\n <script src=\"https://unpkg.com/vuetable-2@1.6.0\"></script>\n <!--SMTP-->\n <script src=\"https://smtpjs.com/v3/smtp.js\"></script>\n <style type=\"text/css\">\n .panel-footer {\n background: #444c55;\n }\n\n .panel,\n .panel-group,\n .panel-heading,\n .panel-footer,\n .panel-body,\n .panel-collapse {\n border-radius: 7px !important;\n }\n\n .panel {\n margin-bottom: 5px !important;\n }\n\n .panel-body {\n padding-bottom: 5px !important;\n }\n </style>\n \n</head>\n\n<body>\n <div id=\"app\">\n <div class=\"desktop-menu-layout mobile-menu-layout sticky-footer-layout\">\n <div id=\"pageTop\"></div>\n <bc-menu display=\"desktop\" :selected=\"activeMenu\" v-slot=\"{ selected }\">\n \n </bc-menu>\n \n \n <!-- Page Wrapper -->\n <main class=\"page-wrapper\">\n{{{content}}}\n </main>\n\n <!-- Site Footer -->\n <footer class=\"site-footer\">\n <div class=\"row\">\n <div class=\"col-xs-12\">\n <p class=\"footer-copyright\"></p>\n <ul class=\"list-inline footer-links\"></ul>\n </div>\n </div>\n </footer>\n\n <!-- Mobile Menu -->\n <bc-menu display=\"mobile\" :selected=\"activeMenu\" v-slot=\"{ selected }\">\n {{{menu}}}\n </bc-menu>\n </div>\n\n </div>\n</body>\n\n<script>\n{{{vue}}}\n</script>\n\n\n\n</html>","output":"str","x":970,"y":180,"wires":[["675d7a6d11188464"]]}]