/home/pi(ユーザー名)/Public/images/xxx.jpgに任意の画像を置いてそれをNode-REDから参照できるようにする。
フローの例
[http in] → [template] → [http response]
HTTP Inノード
http in：- メソッド：GET
- URL：
/products
HTMLテンプレートノード（例）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>製品画像ビューア</title>
<style>
.product-list button { margin: 5px; }
img { max-width: 500px; display: block; margin-top: 20px; }
</style>
</head>
<body>
<h1>製品一覧</h1>
<button onclick="showImage('AAA')">AAA</button>
<img id="productImage" src="" alt="製品画像がここに表示されます">
<script>
function showImage(productNumber) {
document.getElementById('productImage').src = "/images/" + productNumber + ".jpg";
}
</script>
</body>
</html>
HTTP Responseノード
- そのまま置くだけでOK
静的フォルダに画像を置く
settings.jsに以下を追記：httpStatic: '/home/pi/Public/',※Public/images/にAAA.jpgのように製品画像を保存しておく- Node-REDを再起動：
node-red-stopnode-red-start
動作確認
http://<IP>:1880/products → 一覧表示
AAAボタンをクリック → 画像表示
コメント