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

Question

Пожалуйста, помогите с выводом изображения из 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>

Answer 1

Тоже сталкнулась с проблемой, что по 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"
                }
              }
            }
          }
        }
      ]
    }
  }
}

Answer 2

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

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

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

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

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

БЛОГ НА HUSL

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

Ответы (2 шт):