How can I implement cloudinary to display images as backgrounds dynamically? I can't see to fetch them correctly

Question

I was wondering why I can't fetch the image from cloudinary, I want to post an image as an background,apparently I'm not fetching the image correctly.

function Post({post}){

    return(
        <div className='PostBlock' 
        style={{backgroundImage: `url(${post.getImage})`}}>
          
              <div>
              {console.log(post.getImage)} 
            <h3>genere:{post.getGenere}</h3>
           
            </div>
             <div>
                 <h3>Title: {post.getTitle}</h3>
            </div>
            
            <div>
            <p>{post.getBody}</p>
        
            </div>
            
        </div>
    )
}

export default Post

my PostForm which is a modal,this is where I succesfully upload my images after I click "save post", although the problem relies on fetching and showing the image url, which apparently I'm not doing so correctly, scroll down to the "Post" component code snippet

import { useState } from "react"
import Axios from "axios"



function PostFormModal({onAdd}){
 
let [getGenere,setGenere]=useState('Travel')
const [getTitle,setTitle]=useState('')
const [getBody,setBody]=useState('')
let [getImage,setImage]=useState('')

   const uploadImage = () => {
    const formData = new FormData()
    formData.append("file",getImage)
    formData.append("upload_preset","ddyy5zbx")

    Axios.post("https://api.cloudinary.com/v1_1/dk5lv4qj5/image/upload",formData)
    .then((res)=>console.log(res))
    .catch((e)=>console.log(e))
}

    //const genere = ['Travel','LifeStyle','Business','Food','Work']
        
        
    const onSubmit=(e)=>{
        e.preventDefault()
        onAdd({getGenere,getTitle,getBody,getImage})
    }

return( 

        <div className='formStyle' >
            <form onSubmit={onSubmit} >
                <div className="formStyleInner">
                    <label>Choose a genere: </label>
                    <select value={getGenere} onChange={e=>setGenere(e.target.value)}>
                        <option value='Travel'>Travel</option>
                        <option value='Lifestyle'>LifeStyle</option>
                        <option value='Business'>Business</option>
                        <option value='Food'>Food</option>
                        <option value='Work'>Work</option>
                    </ select>
               </div>

                <div className="formStyleInner">
                    <label>Title:</label>
                        <input type="text"
                        value={getTitle}
                                placeholder='add a title!'
                                onChange={(e)=>setTitle(e.target.value)}> 
                        </input>
                </div>
                
                <div className="formStyleInner">
                    <label>Background Image:</label>
                        <input type="file"
                                onChange={(e)=>setImage(e.target.files[0])}> 
                               
                        </input>
                      
                </div>

                <div className="formStyleInner">
                       
                    <textarea type='textarea'
                        rows='10'
                        cols="35"
                        value={getBody}
                        placeholder='add text!'
                        onChange={(e)=>setBody(e.target.value)}>
                       
                    </textarea>
                </div>
                    <input type="submit" value="Save post" onClick={uploadImage}/>
            </form>
        </div>
    )
}

export default PostFormModal

here's my App()

import { useState } from "react";
import PostList from "./component/PostList";
import PostModalBtn from "./component/postModalBtn";
import PostFormModal from "./component/PostFormModal";
import FilterButton from "./component/FilterButton";
//Filter MAP

const FilterMap = {
  All:() => true,
  Travel: genSel => genSel.Travel,
  LifeStyle:genSel=> genSel.LifeStyle,
  Business:genSel=> genSel.Business,
  Food:genSel=> genSel.Food,
  Work:genSel=>genSel.Work
  
}

const FilterNames=Object.keys(FilterMap)
   


function App({onAdd}) {
const [isModalDisplayed,setIsModalDisplayed]=useState(false)
const[filter, setFilter]= useState('All')
const[posts,setPosts]=useState(
  [
    {
      id:1,
      getTitle:'Titulo Generico',
      getGenere:'Travel',
      getBody:'Prueba de body'
    },

  ]
 )
 
//FilterList

const filterList =  FilterNames.map(name=>(
  <FilterButton 
    key={name}
    name={name}
    isPressed={name === filter}
    setFilter={setFilter}/>
))

 //addPost action

 const addPost = (post)=>{
   const id= Math.floor(Math.random()*1000)+1
   const getPost = {id,...post}
   setPosts([...posts,getPost])
 }
  return (
  <>
        <div className='headerTitle'>
          <h5>Making your life easier</h5>
        </div>
        <div className='titleCont'>
          <h1>Discovering the world</h1>
        </div>
        <div className='FilterBtnStyle'>
         {filterList}
        </div>
          <div className='buttonCont'>
           <PostModalBtn onClick={onAdd}/>
        </div>
            <PostFormModal onAdd={addPost}/>
        
        <PostList posts={posts}/>
 </>
  );
}

export default App;

"Post" Component, this is where the background image is supposed to be brought dynamically, apparently I'm not calling it correctly because It's not fetching the right path...

function Post({post}){

    return(
        <div className='PostBlock' 
        style={{backgroundImage: `url(${post.getImage})`}}>
          
              <div>
              {console.log(post.getImage)} 
            <h3>genere:{post.getGenere}</h3>
           
            </div>
             <div>
                 <h3>Title: {post.getTitle}</h3>
            </div>
            
            <div>
            <p>{post.getBody}</p>
        
            </div>
            
        </div>
    )
}

export default Post

Inspecting the upload from the console, we can see that the object uploaded to cloudinary indeed has an url for us to use

What I'm actually fetching is an object appended to "getImage" and not an "url"

From what I've been reading, I cannot bring up images from cloudinary unless I use the IMAGE tag from cloudinary-react and cloudinary-core libraries, but I have NO clue how to implement that into an background-image

Answer 1

Once you have uploaded the image to Cloudinary, you can use the image URL like any other image URL to display the image on the HTML page. However, if you would like to use any of the Cloudinary helper methods then the public_id which is the name of the image on Clouudinary should be used which in this case is the one beginning with mqrhnpw.. (the last part of the Cloudinary URL after the version number).