开发者问题收集

在 Strapi 中访问图片 URL

2021-09-10
32576

我在从 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"
    }
}
3个回答

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

事实证明,Strapi 会自动过滤关系。 如果有人想知道,获取关系的方法是使用调用中的填充字段。

获取所有关系的示例:

GET: /api/books?populate=*
Tittoh
2021-12-15

我可以通过调用基本 URL 来解决这个问题: http://localhost:1337 + review.attributes.FeaturedImage.data.attributes.formats.thumbnail.url 即 http://localhost:1337/uploads/thumbnail_food_logo_61b7e1b311.webp?width=379&height=379

Debuggingnightmare
2022-05-08

答案就在您的 json 响应中。您的响应中没有名为 Image 的键,而是名为 Photo 。因此,您需要做的就是访问 Photo.url 并将 url 附加到主机 localhost:1337/ 。或者,如果您希望显示缩略图,则可以使用 Photo.formats.thumbnail.url 并将其附加到主机 localhost:1337

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


function generateHTMLtemplate(data) {
  const { title, description, Photo } = 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="${api_url}/${Photo.url}"/>
    
    </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)
  }
}
Salvino D'sa
2021-09-11