הצגת תמונות- NODEJS, REACT

[(:1234]

אני עושה פרויקט בNODEJS, REACT, העלתי תמונות לשרת (המשתמשים מעלים).
התמונות עולות מצוין, השתמשתי ב-multer.
עכשיו אני צריכה להציג את התמונות באתר, ואני לא מצליחה!!
אולי מישו יוכל לומר לי איך אני לוקחת את התמונות מהשרת, איזה בקשה לעשות ואיך, ומה לכתוב בקליינט??
אני כבר מיואשת!!
תודה מראש לכל העוזרים והמסייעים

 

[varchar]

מתכוונת לקבל את התמונות מהשרת כ buffer או כתובת ?
על איזה שרת/ענן הם שמורות?

 

[(:1234]

מתכוונת לקבל את התמונות מהשרת כ buffer או כתובת ?

לא יודעת, נראה לי ככתובת

על איזה שרת/ענן הם שמורות?

שרת מקומי, localhost:3001

 

[varchar]

כתובת התמונה לאחר העלאה היא

http://localhost:3001/myFolder/imageName.png

?

 

[(:1234]

כתובת התמונה לאחר העלאה היא

http://localhost:3001/myFolder/imageName.png

?

ככה זה אמור להיות...
אם אני כותבת את זה בדפדפן, הוא כותב לי שאין כזאת בקשת GET.
השאלה שלי היא בדיוק איך אני יוצרת את הבקשה בשרת, וקוראת לה בקליינט?

 

[varchar]

יש לך ב app.js שורה דומה לזה:
app.use(express.static('public'))
?

 

[(:1234]

כן, זה:
app.use('/api/fileShow', express.static('./images'));

 

[varchar]

אם אני לא טועה כל הקבצים שנמצאים בתיקיה images בפרויקט node.js יוכלו 'להקרא' בכתובת שלהם ללא מעבר ב route

אם אני מבינה נכון הקבצים שהמשתמשים העלו נמצאים בתיקיה הזו

אז 1) כתובת התמונה אינה http://localhost:3001/images/imageName.png
אלא http://localhost:3001/imageName.png
ללא התיקיה images
2) נראה לי שלא צריך נקודה וסלש לפני images אם נמצא בתיקיית השורש של הפרויקט וגם app.js
כלומר app.use(express.static('images')

 

[(:1234]

אם אני לא טועה כל הקבצים שנמצאים בתיקיה images בפרויקט node.js יוכלו 'להקרא' בכתובת שלהם ללא מעבר ב route

אם אני מבינה נכון הקבצים שהמשתמשים העלו נמצאים בתיקיה הזו

אז 1) כתובת התמונה אינה http://localhost:3001/images/imageName.png
אלא http://localhost:3001/imageName.png
ללא התיקיה images
2) נראה לי שלא צריך נקודה וסלש לפני images אם נמצא בתיקיית השורש של הפרויקט וגם app.js
כלומר app.use(express.static('images')

אוקי,
אז מה זה אומר? חוץ מהשורה הזאת בשרת, אני לא כותבת עוד כלום?
ואז מה אני כותבת בקליינט כדי לקרוא לבקשה הזאת? כדי להציג תכלס את התמונה?
תודה ענקית!!!

 

[varchar]

תנסי להדביק בדפדפן את כתובת התמונה כנ"ל
אם עובד ,מצוין! עכשיו את יכולה לשים את הכתובת בתוך src של תגית תמונה
<img src="http://localhost:3001/imageName.png">

 

[varchar]

ואגב, יש קוד המאפשר להציג את התמונה כבר כשבוחרים אותה, עוד לפני ההעלאה לשרת.

ונ.ב. 2 נראה לי שלא מקובל לתת למשתמש להעלות קבצים לתוך תיקיית הפרויקט מטעמי אבטחה.
למיטב ידיעתי נהוג להעלות לתיקיית קבצים בענן כלשהו וכדו'
כמובן אם זה פרויקט שלא פתוח לעולם אין בעיה....

 

[(:1234]

תנסי להדביק בדפדפן את כתובת התמונה כנ"ל
אם עובד ,מצוין! עכשיו את יכולה לשים את הכתובת בתוך src של תגית תמונה
<img src="http://localhost:3001/imageName.png">

זה לא עובד... אני לא מבינה מה הבעיה...
זה חלק ממה שכתוב לי בשרת, הרוב זה העלאת תמונות, מה לא טוב כאן?

const express = require('express');
const app = express();
app.use(express.json());
const cors = require('cors');
app.use(cors());
//  app.use( express.static('./images'));
const multer = require('multer');
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
      console.log("upload-single");
        cb(null, './images')
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname)
    },
});
const upload = multer({ storage: storage });
  // app.use('//api/fileShow', express.static(path.join(__dirname, 'images')));
const service = require('./db/service');
//const connection = require('../server/db/db');
const router = express.Router();
app.post("/api/uploadImage/InsertToFolder", upload.single('file'), (req, res)=>{
  console.log(req);
  console.log("aaa");
  req.statusCode='ok';
});
app.use( express.static('images'));

 

[varchar]

נתחיל מהבסיס :
1) העלאת התמונות עובד? רואים את הקבצים שהעלית בתיקיית images?

2) קובץ שאת שמה באופן ידני בתיקיית images, האם את מצליחה לגשת אליו עי כתובת כנ"ל

 

[(:1234]

נתחיל מהבסיס :
1) העלאת התמונות עובד? רואים את הקבצים שהעלית בתיקיית images?

2) קובץ שאת שמה באופן ידני בתיקיית images, האם את מצליחה לגשת אליו עי כתובת כנ"ל

1. כן עובד מצוין.
רואים את כל התמונות בתיקיה.
2.לא..

 

[(:1234]

טוב, הצלחתי...

2) נראה לי שלא צריך נקודה וסלש לפני images אם נמצא בתיקיית השורש של הפרויקט וגם app.js
כלומר app.use(express.static('images')

ניסיתי הפוך... הוספתי סלש ועבד..

תודה רבה!!