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

问题描述

我想知道为什么我无法从 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”组件代码片段


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

这是我的应用程序（）

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;

“发布”组件，这是应该动态引入背景图像的地方，显然我没有正确调用它，因为它没有获取正确的路径......

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 调出图像，但我不知道如何将其实现到背景图像中

标签： javascriptreactjsbackgroundcloudinary

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

问题描述

解决方案

推荐阅读