Изображения не загружаются на одной из страниц сайта, отображается только alt txt(другие страницы работают отлично). В настоящее время используется node.js, ejs для задней части

#node.js #image #routes #frontend #backend

#node.js #изображение #маршруты #внешний интерфейс #бэкэнд

Вопрос:

Я работаю над веб-сайтом. Все страницы работают нормально, но на одной странице (brand-and-strategies.ejs) изображения не отображаются (отображается alt txt). Я думаю, что нет никаких проблем со значением «src» изображений, так как эти изображения нормально загружаются на других страницах, и даже там изображения загружаются не только на этой конкретной странице. Я подозреваю, что с серверной частью есть какая-то проблема с маршрутизацией, хотя я не уверен. Код чем-то похож на:

:: ИНТЕРФЕЙС ::

 lt;picturegt;  lt;source srcset="publicimagesservices_assetsbrand_amp;_Strategy_herohero1.webp" type="image/webp"gt;  lt;img src="publicimagesservices_assetsbrand_amp;_Strategy_herohero1.png" alt="Hero 1" data-media="true"  loading="lazy" type="image/png"gt;  lt;/picturegt;   lt;/divgt;  

:: СЕРВЕРНАЯ ЧАСТЬ ::

 app.use(bodyParser.urlencoded({  extended: true })); app.use(express.static("public")); //allows EJS to access "public" folder. app.set('view engine', 'ejs');   app.get("/services",function(req,res){  res.render("services.ejs"); }) app.get("/services/brand-and-strategy",function(req,res){  res.render("brand-and-strategy.ejs"); })  

Ответ №1:

Предполагая нижеприведенную структуру папок:

 ./public/images/img.png ./server.js  

Файл: server.js

 app.use(express.static("public")); // the above line serves all the files from ./public folder // so the img.png is accessible at example.com/images/img.png  

это означает src , что атрибут должен быть абсолютным путем

 lt;img src="/images/img.png"gt;  

Если вы находитесь на странице example.com/services и с тех пор, как вы использовали относительный путь

 public/images/services_assets/brand_amp;_Strategy/_hero/hero1.png  

сервер пытается загрузить изображение с

 example.com/services/public/images/services_assets/brand_amp;_Strategy/_hero/hero1.png  

что неверно, и вы должны увидеть ошибку 404 «Не найдено» в devtools.

Чтобы исправить это, используйте абсолютный путь

 lt;img src="/images/services_assets/brand_amp;_Strategy/_hero/hero1.png"gt;  

Кроме того, если вы хотите, чтобы /public в пути просто отображалась общая папка, например

 app.use('/public', express.static("public"));  

затем используйте такие пути отмены, как этот

 lt;img src="/public/images/services_assets/brand_amp;_Strategy/_hero/hero1.png"gt;  

Комментарии:

1. Большое Вам спасибо, мистер Молда! Я проверил, и проблема заключалась в абсолютных/относительных путях. Я использовал это в верхней части страницы (перед навигационной панелью), и изображение было загружено. Однако в его конкретном разделе изображение не загружается. Я предполагаю, что могут возникнуть некоторые проблемы со свойствами CSS. Я пытаюсь это понять, но в любом случае большое спасибо!