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

Question

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

Рейтинг: 0Ответов: 2Опубликовано: 28.02.2023

Пожалуйста, помогите с выводом изображения из strapi, убили уже кучи времени и нервов, но никак не получается это сделать. В коде ниже работает вывода Title, но не работает вывод изображения:

    <template>
  <div>
    <div v-for="product in products.data" :key="product.id">
      <nuxt-link :to="/products/${product.id}">
        <h1 class="font-bold">{{ product.attributes.Title }}</h1>
        <img :src="imageUrl" :alt="product.attributes.Title" loading="lazy" />
      </nuxt-link>
    </div>
  </div>
</template>

<script setup>
const { data: products } = await useFetch('http://localhost:1337/api/products%27)

const media = useStrapiMedia()
const imageUrl = await media('product')

console.log('text', media)

</script>

<style scoped>

</style>

nuxt.js strapi

Источник: Stack Overflow на русском

Answer 1

▲ 0

Тоже сталкнулась с проблемой, что по rest api не отдает изображения.

я решила эту проблему подключением полагина graphql и делая запрос в graphql.

http://localhost:1337/graphql

Запрос

  articles {
    data{
      attributes{
        imgPreview{
          data{
            attributes{
              url
            }
          }
        }
      }
    }
  }
}

Ответ

{
  "data": {
    "articles": {
      "data": [
        {
          "attributes": {
            "imgPreview": {
              "data": {
                "attributes": {
                  "url": "/uploads/products_web_waf_first_bg_2a0a9ec68b.jpg"
                }
              }
            }
          }
        }
      ]
    }
  }
}

ДОПОЛНЕНИЕ К ОТВЕТУ

BACK

Установить плагин graphql https://market.strapi.io/plugins/@strapi-plugin-graphql
В сущности добавить поле для медиа
В настройках ролей настройте доступы для сущности и медиа, у вас должен быть открыт доступ для query запросов (если у вас нет авторизации, значит настраиваете публичный доступ, лучше сначала попрактиковаться на нем)
Загрузите изображение из медиа библиотеки страпи
Перейдите в интерфейс графа. Ваш сервер где страпи у вас развернуто и в конце добавьте /graphql, должно получиться такого плана http://localhost:1337/graphql
Протестируйте запрос. Если вы все правильно сделали и ни чего не упустили, вы должны получить относительный url, который хранится в приложении strapi из медиа библиотеки, которое расположено в папке public/uploads. Правая сторона ответа, это и есть то что вы получите на стороне фронта в ответе на запрос

Если вам нужен полный путь, то это зависит от ситуации, но проще подключить сторонний сервис для хранения медиа, несколько вариантов так же есть описанные в документации strapi https://docs.strapi.io/dev-docs/plugins/upload

FRONT

Я в отдельном файле описала схемы для запросов в граф
В отдельном файле сделала универсальную функцию, которая принимает query, variables для запроса в граф

import axios from 'axios';
import { print } from 'graphql';

const url = process.env.BACKEND_API; //  http://localhost:1337/graphql

export const requestGraphql = (query, variables = {}) => {
  return axios.post(
    url,
    {
      query: print(query),
      variables: variables,
    },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    }
  );
};

Делаю запрос в граф. У меня фронт на next.js, но сути это не меняет, обычный axios запрос, можно любую другую библиотечку использовать. Получаю дату и прокидываю данные в верстку

    import { GET_ARTICLES } from '../../src/common/actions/get';
    import { requestGraphql } from '../../src/common/actions/requestGraphql';

    Index.getInitialProps = async (ctx) => {
      try {
        const resArticles = await requestGraphql(GET_ARTICLES); // axios
        const resArticlesBest = await requestGraphql(GET_ARTICLES, { category: 'Лучшее' });
    
        const articles = resArticles.data.data.articles.data;
        const articlesBest = resArticlesBest.data.data.articles.data;
    
        return { articles, articlesBest };
      } catch (error) {
        return { error };
      }
    };
    
    export default Index;

Answer 2

▲ 0

Я использую плагин Populate Deep:

https://market.strapi.io/plugins/strapi-plugin-populate-deep

По умолчанию в API запрос Strapi 4 не попадают медиафайлы.

Пример запроса с плагином:

http://localhost:1337/api/pages?populate=deep

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

Ответы

BACK

FRONT