Помогите с позиционированием фотографии в React.js

Для отображения превью фотографии в заданной рамке в React.js можно использовать следующий код:

 
 
  {selectedFile ? ( 
     
  ) : ( 
    
 
  )} 
  
 
      className="element" 
    alt="Element" 
    src="https://cdn.animaapp.com/projects/651aba4011cd84613b508e5b/releases/651ac821780675569006a4a1/img/-------1-2-1@2x.png" 
  /> 
 

Здесь selectedFile - это переменная, которая содержит выбранную пользователем фотографию. Если selectedFile не равен null, то отображается превью выбранной фотографии, иначе отображается пустой блок.
Для отображения выбранной фотографии используется тег img, а для отображения пустого блока - div.
Также в коде используются классы overlap-2, ellipse и element, которые могут быть определены в CSS.

  
  
{selectedFile ? (  
    
) : (  
  
 
      className="element"  
  alt="Element"  
  src="https://cdn.animaapp.com/projects/651aba4011cd84613b508e5b/releases/651ac821780675569006a4a1/img/-------1-2-1@2x.png"  
/>  
  
  
)}  
 

  
.index .element-1 { 
  height: 299px; 
    left: 2px; 
    object-fit: cover; 
    position: absolute; 
    top: -3px; 
    width: 299px; 
} 

Вам нужно назначить функцию handleFileChange в теге <input> для обработки выбранного файл-объекта.

В частности, функция handleFileChange будет изменять состояние selectedFile, каждый раз, когда пользователь выбирает новый файл изображения.

Ваш код должен выглядеть примерно так:
====================================================================

 import React, { useState } from 'react'; 
 
const YourComponent = () => { 
 
  const [selectedFile, setSelectedFile] = useState(null); 
 
  const handleFileChange = (event) => { 
    setSelectedFile(event.target.files[0]); 
  }; 
 
  return ( 
    
 
      
 
      
 
         
          
Choose Your Photo
 
                      type="file" 
            id="file" 
            accept="image/*" 
            style={{ display: "none" }} 
            onChange={handleFileChange} 
          /> 
         
      
 
    
 
    
 
    {selectedFile ? ( 
       
    ) : ( 
      
 
    )} 
      
 
              className="element" 
        alt="Element" 
        src="https://cdn.animaapp.com/projects/651aba4011cd84613b508e5b/releases/651ac821780675569006a4a1/img/-------1-2-1@2x.png" 
      /> 
    
 
  ); 
} 
 
export default YourComponent; 

==================================================================

Убедитесь, что вы меняете "Заданная ширина" и "Заданная высота" на ширину и высоту, которую вы хотите использовать для предварительного просмотра изображения.

Обратите внимание, что вышеуказанный пример кода предполагает, что вы используете последние версии react, в которых доступны hooks. Если вы используете более старую версию, вам потребуется класс компонентов и метод setState для обработки состояния.

А в чем трабл? Поменяй урл на нужный и все. Не понятен вопрос