Блог

Мне было интересно, почему я не могу получить изображение из 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

 

моя форма сообщения, которая является модальной,здесь я успешно загружаю свои изображения после нажатия кнопки «Сохранить сообщение», хотя проблема заключается в извлечении и отображении URL-адреса изображения, что, по-видимому, я делаю неправильно, прокрутите вниз до фрагмента кода компонента «Опубликовать».

 
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», это то место, где фоновое изображение должно динамически выводиться, очевидно, я неправильно его называю, потому что оно не выбирает правильный путь…

 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, если не использую тег IMAGE из библиотек cloudinary-react и cloudinary-core, но я понятия не имею, как реализовать это в фоновом изображении

После загрузки изображения в Cloudinary вы можете использовать URL-адрес изображения, как и любой другой URL-адрес изображения, для отображения изображения на HTML-странице. Однако, если вы хотите использовать любой из вспомогательных методов Cloudinary, следует использовать public_id, который является именем изображения на Cloudinary, которое в данном случае начинается с mqrhnpw.. (последняя часть URL-адреса Cloudinary после номера версии).