#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. Я пытаюсь это понять, но в любом случае большое спасибо!