如何实现 cloudinary 以动态显示图像作为背景？我看不到正确获取它们

Posted 2023-03-25

【中文标题】如何实现 cloudinary 以动态显示图像作为背景？我看不到正确获取它们

【英文标题】：How can I implement cloudinary to display images as backgrounds dynamically? I can't see to fetch them correctly

【发布时间】：2021-10-03 18:17:50

【问题描述】：

我想知道为什么我无法从 cloudinary 中获取图像，我想将图像作为背景发布，显然我没有正确获取图像。

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

我的 PostForm 是一个模态，这是我点击“保存帖子”后成功上传图片的地方，尽管问题依赖于获取和显示图片 url，显然我没有正确执行，向下滚动到“Post”组件代码sn-p

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

这是我的 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”组件，这是应该动态引入背景图像的地方，显然我没有正确调用它，因为它没有获取正确的路径......

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

从控制台查看上传，我们可以看到上传到cloudinary的对象确实有一个url供我们使用

我实际获取的是附加到“getImage”而不是“url”的对象

根据我一直在阅读的内容，除非我使用 cloudinary-react 和 cloudinary-core 库中的 IMAGE 标签，否则我无法从 cloudinary 调出图像，但我不知道如何将其实现到背景图像中

【参考方案1】：

将图像上传到 Cloudinary 后，您可以像使用任何其他图像 URL 一样使用图像 URL 在 html 页面上显示图像。但是，如果您想使用任何 Cloudinary 辅助方法，则应使用 public_id，它是 Clouudinary 上图像的名称，在这种情况下是以 mqrhnpw.. 开头的那个（Cloudinary URL 的最后一部分在版本号）。

【讨论】：

感谢您的回复，我的问题在于动态添加它，我需要访问我不知道如何访问的 url 字符串（或 secure_url），我只知道“响应”给出返回一个具有“url”和“secure_url”的数据密钥的对象，我需要将其作为属性发送。