Как вывести изображение на стороне фронта?

Question

[destroyerR]

Я храню путь к изображению в базе данных, само изображение у меня лежит в storage laravel. Мне нужно вывести его в моем фронте. У меня есть api, который возвращает путь миниатюры с базы данных:
Так выглядит бд:
Так выглядит Storage:
Вот что получаю на фронте:

Answer 1

[Антон Шаманов]

посмотри .htaccess возможно у тебя не доступна папка или она не в корне сайта (скорее всего должно быть /storage/super-mario-world/...) - посмотри будет ли открываться картинка напрямую

Comments

[destroyerR]

попробовал /storage/super-mario-world/... проблема осталась. Напрямую открывается по этому адресу 127.0.0.1:8000/storage/super-mario-world/v3/thumbn.... Вот .htaccess

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

[Антон Шаманов]

эээ.. а почему в ссылке v3 а не v2? 127.0.0.1:8000/storage/super-mario-world/v3/thumbn...

[Антон Шаманов]

и в ошибке у тебя указан 8081 порт, а не 8000

[destroyerR]

Антон Шаманов, я для проверки создал еще одну версию

[destroyerR]

Антон Шаманов, у меня бэк на 8000, а фронт на 8081

[destroyerR]

destroyerR, для 2 версии тоже все прекрасно отображает

[Антон Шаманов]

у тебя localhost:8081/storage/super-mario-world/v2/thumbn... открывается?

[destroyerR]

Если я попробую открыть localhost:8081/storage/terarria/v1/thumbnail.png, то ничего не откроется

[destroyerR]

Антон Шаманов, нет, не открывается

[Антон Шаманов]

destroyerR, ну значит нужно прописать чтобы в htaccess порт поддерживался

RewriteCond %{HTTP_HOST} ^localhost:8081$ [NC]
RewriteRule (.*) http://localhost:8000/$1 [R=301,L]

не самый удачный вариант, но должно работать

[destroyerR]

Антон Шаманов, что-то не помогло. Пытался уже разными способами решить проблему, не получается

[Сергей delphinpro]

destroyerR, Если бэк работает на другом хосте (включая другой порт), то нужно пересылать на фронт полный путь к ассетам, включая хост. Для этого стоит использовать помощник asset() например, и указать правильный для бэка APP_URL в .env
Вот и всё.

[destroyerR]

Сергей delphinpro, Получается конечный url на стороне фронта будет выглядить так? localhost:8081/127.0.0.1:8000/storage/terarria/v1/thumbnail.png. Извините, если вопросы тупые, но я не много не понимаю, так как недавно начал изучать API

[Сергей delphinpro]

destroyerR, урл должен выглядеть так

http://localhost:8000/storage/terarria/v1/thumbnail.png

Если бэк работает на localhost:8000

[destroyerR]

Сергей delphinpro, а как мне для фронта изменить порт?

[destroyerR]

Сергей delphinpro, бэк работает на 127.0.0.1:8000

[Сергей delphinpro]

destroyerR, я же уже все написал.
Я тебя на фронт прилетает так (кстати, нахера ты картинками код выкладываешь? мне приходится из-за этого его вручную переписывать, имей уважение к отвечающим, выкладывай код текстом!)

content: [
  thumbnail: '/bla/image.jpg'
]

А должно прилетать

content: [
  thumbnail: 'http://127.0.0.1:8000/bla/image.jpg'
]

Так понятнее?

[destroyerR]

Сергей delphinpro, извините) просто думал на глаз ответ найдется

[destroyerR]

Сергей delphinpro, теперь у меня проблема такая ps://127.0.0.1:8000/storage/super-mario-world/v1/t... net::ERR_CONNECTION_CLOSED

[destroyerR]

из за чего это может происходить

[Сергей delphinpro]

destroyerR, что такое ps:// ?

[destroyerR]

Сергей delphinpro, https не докопировалось

[Сергей delphinpro]

destroyerR, https? А ssl настроен на локалке?

[Сергей delphinpro]

destroyerR, ты написал выше, что по адресу

http://127.0.0.1:8000/storage/super-mario-world/v3/thumbnail.png

у тебя картинка открывается. Вот этот адрес и передавай на фронт. Я не знаю как еще понятнее объяснять...

[Антон Шаманов]

Сергей delphinpro, напиши отдельным ответом, отмечу как решение