Почему не грузит фото тегом img src в проекте node.js?

Question

[Александр Кошелев]

Добрый день парни, делаю проект на ноде, в нем использую шабланизатор ejs,css подключаются без проблем а вот картинки не грузит
вот структура:

views/index.ejs
img/18.png

хочу просто загрузить хотя бы в index фото , но не оплучается, прописал следующий путь
<img src="../img/18.png" alt="фото"> ../ вышел из папки views, зашел в папку img и беру фото, но почему то не грузит, можете помочь?
может особенности шаблонизатора ejs какие то есть или как? на официальном сайте ничего такого не нашел про загрузку фото

Comments

[Lynn «Кофеман»]

Картинку грузит браузер и путь надо писать относительно адреса в браузере.
Ну неплохо бы сервер настроить, что бы он картинки отдавал.

[Александр Кошелев]

Алексей Тен, а какие настройки то необходимы? это ж к верстке относится картинка, разве настройки серва нужны? и какие ?

Answer 1

[Михаил]

../img/18.png относительно чего?
site.ru/../img/18.png ???????????

Comments

[Александр Кошелев]

site.ru/../img/18.png ??????????? - это разве так будет выглядеть в итоге? мне же надо выйти сначала из папки views в корень site.ru а потом задать путь до файла находящегося в другой папке, разве нет? запутался чет

[Михаил]

site.ru/views/ ?

url картинок скачивает браузер а не шаблонизатор

[Александр Кошелев]

Михаил, site.ru/views/ - тут находится ejs файл верстке, как мне правильно прописать путь в моей ситуации? уже перепробовал по разному то(

[Михаил]

Александр Кошелев, что нужно написать в url чтобы получить доступ к картинке?
site.ru/img/18.png ?

[Александр Кошелев]

Михаил,

[Александр Кошелев]

Михаил, не грузит так, пошел по примеру подключения файла css который работает, но тоже не получилось, вообще не пойму в чем загвоздка!!!(

[Михаил]

Александр Кошелев, /img/18.png

[Александр Кошелев]

Михаил, не грузит(((( уже пробовал это

[Михаил]

Александр Кошелев, тогда index.js приложите, а то гадать что у вас там написано нет желания

[Александр Кошелев]

Михаил,

var express = require('express');
var app = express();

app.set('view engine', 'ejs');
app.use('/public', express.static('public'));

app.get('/', function(req, res){
  res.render('index');
});

app.listen(3000);

Приложил, спасибо!

[Михаил]

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

1. По-этому и работает css
2. Всю статику желательно класть в public, dist, public_html и ему подобные

Видимо вы не до конца понимаете как работает нода, в кратце:
Нода получает запрос и передает его вам, все. Дальше че хотите делайте с ним. Если браузер запрашивает site.ru/img/18.png то вы можете что угодно отдать в ответ, в вашем случае файл из PUBLIC/img/18.png

[Александр Кошелев]

Михаил, я пробовал public, тоже не получалось! там изначально и лежал в папке паблик

[Михаил]

Александр Кошелев, https://expressjs.com/ru/starter/static-files.html

[Александр Кошелев]

Михаил, спасибо, я перепрочел еще раз, но проблема ни куда не делась(((

[Михаил]

Тогда ¯\_(ツ)_/¯
Залейте на гитхаб может посмотрю

[hzzzzl]

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

Александр Кошелев, то есть если положить картинку в public/img/kartinka.jpg
и в браузере запросить < img src="/img/kartinka.jpg" >, то в консоли будет 404 нот фаунд картинка?


это вообще мимо, получается что хочешь запросить картинку из папки films/.... которая лежит в одной папке/каталоге с index.html, то есть такого вообще не существует

[Михаил]

hzzzzl,

Структура:

/
  public/
    img/
      img.jpg

  index.js

index.js

var express = require('express');
var app = express();

app.use(express.static('public'));

app.listen(3000);

и ссылка вида

localhost:3000/img/img.jpg

[Александр Кошелев]

hzzzzl, сейчас путь такой же как при подключении css файла

то в консоли будет 404 нот фаунд картинка?

я зпапрашивал путь но гет надо прописать 127.0.0.1:3000/public/img/18.png

[Александр Кошелев]

hzzzzl,

[Александр Кошелев]

Михаил, таким способом app.use(express.static('public')); и css отпал

[Михаил]

Александр Кошелев, не удивительно, у вас же ссылка на css с /public

[Михаил]

Александр Кошелев, Поубирайте все public из url и оставтьте app.use(express.static('public'));

[Александр Кошелев]

Михаил, сделал, а файлы все равно же должны лежать в папке public?

[Михаил]

Александр Кошелев, публичная директория, к которой есть доступ извне

[Александр Кошелев]

Михаил,
Теперь так выглядет ejs файл

<link rel="stylesheet" href="/css/header.css">
  <img src="/img/18.png" alt="фото">

а js так
app.use(express.static('public'));
все равно не грузит фото, это какой то капец О_о

[Михаил]

Александр Кошелев, фотку другую возьмте

[Александр Кошелев]

Михаил, уже начал это делать, блин и да, получилось? как так то?
и в чем разница объясните пожалуйста между
app.use(express.static('public'));

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

[Михаил]

app.use(express.static('public'));
Любые статические файлы с любым url брать из public

app.use('/public', express.static('public'));
Любые статические файлы которые начинаются с /public url брать из public

[Михаил]

Александр Кошелев,
app.use('/aaaaaaaaaaaaaaaaaaaaaaaaaa', express.static('public'));

/aaaaaaaaaaaaaaaaaaaaaaaaaa/img/18.png

[Александр Кошелев]

Михаил, это я понимаю, а фактически суть в разницах применения есть? на первый взгляд только в количестве символов кода, а другие есть?

[Михаил]

Александр Кошелев, ну статику можно из разных мест брать, не только с этой директории

[Александр Кошелев]

Михаил, то есть лучше прописывать без '/public'. понял спасибо!

[Александр Кошелев]

Михаил, загрузил все таки ту фотку. в итоге оказалось что даже не смена расширения помогли а имя файла. вместо 18 сделал logo
дурдом
просто когда сомневаешься что по правильно настроено это начинаешь все юзать и еще больше запутыываться

[Elena]

Михаил, спасибо, мне помогло :)