Having trouble loading images from Flamelink integrated with Firebase and Vue.js

I'm currently facing an issue with my code where I am unable to retrieve images from storage despite the strings working fine. I have referred to the documentation of flamelink-js-sdk but it does not provide clear instructions on handling images.

Below is a snippet of my code:

async created() {
app.content
  .get({
    schemaKey: "teamPage",
    populate: [
      {
        field: "title"
      },
      {
        field: "description"
      },
      {
        field: "executiveBoard",
        fields: [
          "title",
          "position",
          "image",
          "facebook",
          "github",
          "linkedin"
        ]
      }
    ]
  })
  .then(teamPage => {
    this.teamPage = teamPage;
    console.log(this.teamPage.executiveBoard[0].image);
  })
  .catch(error => console.log(error));},

This is how I render them:

 <team-circle
        v-for="board in teamPage.executiveBoard"
        :key="board.title"
        class="col-12 col-sm-12 col-md-4"
        :name="board.title"
        :image="board.image"
        :facebook="board.facebook"
        :linkedin="board.linkedin"
        :github="board.github"
      >{{ board.position }}</team-circle>

Click here to see the src data passed in the img tag

Thank you for your assistance. I hope you can guide me through resolving this problem!

Answer №1

Here are the steps you can take:

app.content
  .get({
    schemaKey: "teamPage",
    populate: [
      {
        field: "title"
      },
      {
        field: "description"
      },
      {
        field: "executiveBoard",
        fields: [
          "title",
          "position",
          "image",
          "facebook",
          "github",
          "linkedin"
        ],
        populate: ["image"]
      }
    ]
  })

Please note the populate: ["image"] addition (check this link)

this.teamPage.executiveBoard[0].image
will now be represented as an array of objects, see example below

[{ 
  contentType: "image/png",
  id: "xxx",
  ...
  url: "https://firebasestorage.googleapis.com/v0/b/....."
}]

You can access the URL like this afterward

this.teamPage.executiveBoard[0].image[0].url

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to showing JSON data in reverse order on a Vue.js HTML page

Here is the order of my JSON data: {"data": {"pid": 50, , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

The `res.download(filepath)` function seems to be failing to initiate a download request on the user's

I'm currently working on a project involving image compression using node and react. The issue I'm facing is that when the server sends the image to the client using res.download(filepath), the download doesn't trigger on the client side. Ho ...

Display the names of files depending on the selection made in the drop-down menu

In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...

What is the best way to smoothly enlarge a div as new content is introduced?

Is there a way to smoothly expand a div when new content is added? const [render, setRender] = useState(false) const showHide= () => { setRender(!render) } return ( <div className="container"> <h1>TEST ...

How can JavaScript be used to automatically send a user to a designated page based on a selected option in

I am in the process of creating a JavaScript function that redirects users based on their selection from a dropdown menu. Additionally, I need to ensure that the word "admin" is set for both the username and password fields. view image here function my ...

Efficiently search in MongoDB by combining $text search with $regex query

Dealing with mongodb has presented me with a challenge: when using $text searches, the match has to be an exact word. For example, searching for 'test' will not find a post containing 'testing123', but using $regex would work. I want to ...

Learn how to handle JSON requests in Node.js within a router script

Hello everyone, I've been struggling to retrieve the body of a request from Postman into my scripts. The body always comes up empty. Can anyone help me figure out the correct way to do this? I have set up the server in index.js and reading the reques ...

Guidelines for dynamically switching between two buttons (function/text) depending on an external factor (such as the number of items bought)

I'm exploring a previous concept of toggling between two buttons conditionally in a CRA. import ... const ... export const Index = () => { // Setting up boolean state to toggle buttons conditionally const [reachMax] = React.useState(id <= ...

Retrieve documents from mongodb that were created in the past half hour

Currently, I am in Central European Summer Time (CEST) and at 15:08, I added a document to my collection. When passing timestamps: true to a new Schema, the createdAt time is showing two hours too early: createdAt:2019-08-21 13:08:39.219 Why is this happ ...

Finding a character that appears either once or thrice

In my work on JavaScript regex for markdown formatting, I am trying to match instances where a single underscore (_) or asterisk (*) occurs once (at the beginning, end, or surrounded by other characters or whitespace), as well as occurrences of three under ...

Best method for retrieving information from a string

Exploring different techniques to extract data from a string is a common practice, including methods like substring and split. Is there an optimal approach to accomplish this task? For instance, when faced with a URL structure such as http://myServer:8000/ ...

What is the best way to retrieve the content of a p tag in React?

How can I access the content of a p tag within an obj and render it through props without using the dangerouslySetInnerHTML method? let content = { para: `<p>A listing page is the public view of a listing. It should informations be designed to ...

What is the best way to swap out the css selector using jQuery?

Looking to switch the height attribute to min-height This is how I usually update the value, but uncertain about changing the attribute $('.mySelector').css('height','650px') <div class="mySelector" style="cursor: -moz-g ...

HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

I'm having trouble creating a sticky navbar. I've attempted to use z-index: 999 but it's not behaving as expected. * { margin: 0; padding: 0; } .navbar { display: flex; align-items: center; justify-items: center; position: ...

Submitting a form using jquery

I am working on a project that involves using a jquery fancyzoom box. Within this box, there is a contact form that should send an email upon submission. However, I am encountering issues with calling the form submit function due to the fancyzoom feature. ...

JavaScript's jQuery selector retrieves a child element from one location and adds it to a different

Why does the Jquery children selector select the img element, extract it, remove it, and then append it to another div element? Shouldn't it create a copy of the element being appended? var $anchors = $("#imageGallery a"); var $overlay = $('&l ...

Creating a hierarchical list structure from a one-dimensional list using parent and child relationships in JavaScript

I am in the process of developing a web application that requires handling nested geographical data for display in a treeview and search functionality. The initial raw data structure resembles this: id:1, name:UK id:2: name: South-East, parentId: 1 id:3: ...

Creating a unique script type in an HTML file

Recently, I've been working on integrating a third-party widget into my website and they provided me with the following script: <script type="acme/widget"> { "some": "value" | "siteId": "hotel" | "money" | "travel" } </script> ...

Can Vue 2 libraries be utilized in Vue 3, and can Vue 3 libraries be used in Vue 2

While I am aware of the breaking changes in Vue 3, I have a question. If my library does not utilize the backward incompatible features, would it be possible for me to use it in both Vue 2 and Vue 3 simultaneously? Or should I wait for a release specifica ...

Issue with Ajax call in WordPress not functioning via a plugin

Having trouble with my Ajax calls. The first one works fine, but when it sends data to send_data.php, I encounter issues running Wordpress functions. After the data is sent to send_data.php, attempting to run a Wordpress function like add_post_meta(2, &ap ...