在 Strapi 中访问图像 url

Question

我在从 Strapi 访问图像时遇到了一些严重的困难，我在这里遇到的所有内容都只是说在访问 URL 之前添加“http://localhost:1337”，但这对我不起作用。我对发生的事情感到非常困惑，而且我也不明白为什么一开始就很难访问它们？

// constants
const strapi = 'http://localhost:1337/posts'
const rootNode = document.getElementById('root');
const api_url = "http://localhost:1337"


function generateHTMLtemplate(data) {
  
  // let url = JSON.stringify(data.image.formats.small.url)
  // console.log(url)
  // ^this returns "Cannot read properties of undefined (reading 'url')"

  // console.log(api_url + url)
  // ^this also returns "Cannot read properties of undefined (reading 'url')"

  const { title, description } = data
  return `
    <div class="time-card-header">
    <header class="time-card-header">
    <div class="header-content">
    <h4 class="timeline-title"><span class="badge">${title}</span></h4>
    <p>${description}</p>
    <div class="circle">
 
    <img src=>
    
    </div>
    </div>
    </header>
     <div class="line"></div>
   </div>
`
}

// render to the dom

function renderDataToTheDom(node, data) {
  const html = data.map(item => generateHTMLtemplate(item)).join('')
  console.log(html)
  node.innerHTML = html
}

// renderDataToTheDom(root, [1,2,3])

async function getData(url) {
  try {
    const response = await fetch(url)
    const data = await response.json();
    renderDataToTheDom(root, data)
  } catch (error){ 
  console.log("error", error.message)
  }
}


getData(strapi)

因此，当我尝试访问.url...时，我就遇到了这个问题。

我真的很感谢对此的任何帮助，我还尝试使用我看到一些人建议的 S3 插件，但这也不起作用，我宁愿让解决方案尽可能简单，因为该网站非常漂亮简单的一个

我的 JSON：

{
    "id": 1,
    "Title": "Santa Dog Picture",
    "published_at": "2021-03-29T02:45:32.389Z",
    "created_at": "2021-03-29T02:45:23.362Z",
    "updated_at": "2021-03-29T02:45:32.414Z",
    "Photo": {
        "id": 3,
        "name": "Pets3.jpg",
        "alternativeText": "",
        "caption": "",
        "width": 4000,
        "height": 6000,
        "formats": {
            "thumbnail": {
                "name": "thumbnail_Pets3.jpg",
                "hash": "thumbnail_Pets3_a4be530d90",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "width": 104,
                "height": 156,
                "size": 5.74,
                "path": null,
                "url": "/uploads/thumbnail_Pets3_a4be530d90.jpg"
            },
            "large": {
                "name": "large_Pets3.jpg",
                "hash": "large_Pets3_a4be530d90",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "width": 667,
                "height": 1000,
                "size": 85.36,
                "path": null,
                "url": "/uploads/large_Pets3_a4be530d90.jpg"
            },
            "medium": {
                "name": "medium_Pets3.jpg",
                "hash": "medium_Pets3_a4be530d90",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "width": 500,
                "height": 750,
                "size": 56.22,
                "path": null,
                "url": "/uploads/medium_Pets3_a4be530d90.jpg"
            },
            "small": {
                "name": "small_Pets3.jpg",
                "hash": "small_Pets3_a4be530d90",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "width": 333,
                "height": 500,
                "size": 31.39,
                "path": null,
                "url": "/uploads/small_Pets3_a4be530d90.jpg"
            }
        },
        "hash": "Pets3_a4be530d90",
        "ext": ".jpg",
        "mime": "image/jpeg",
        "size": 2031.2,
        "url": "/uploads/Pets3_a4be530d90.jpg",
        "previewUrl": null,
        "provider": "local",
        "provider_metadata": null,
        "created_at": "2021-03-29T02:42:56.325Z",
        "updated_at": "2021-03-29T02:42:56.464Z"
    }
}

Answer 1

我在获取 API 响应上的图像数据时遇到问题。他们论坛上的这个答案有帮助。

原来 Strapi 自动过滤关系。如果有人想知道，要获取关系，请使用通话中的填充字段。

获取所有关系的示例：

GET: /api/books?populate=*