>source

src folde에서 만든 .css 파일에 background-img를 설정하려고합니다.

src/Components/Component/Comp.css

.services {
  background-image   : url("./images/img-2.jpg");
  background-position: center;
  background-size    : cover;
  background-repeat  : no-repeat;
  color              : #fff;
  font-size          : 100px;
}

다음과 같은 오류가 발생했습니다.

Error: ENOENT: no such file or directory, open 'C:\xampp\htdocs\react\react-website\src\images\img-1.jpg'

수정을 위해 이미지 폴더를 public에서 src로 복사했는데 제대로 작동했지만 이제 React Component의 해당 경로에있는 해당 이미지에 액세스하려면. 전의:

src/Components/Cards/Cards.js

<CardItem
src="./images/img-9.jpg"
text="Explore the hidden waterfall deep inside the Amazon jungle"
label="Adventure"
path="/services"
/>

src/Components/Cards/CardItem.js

const { src, text, label, path } = props
    return (
        <>
            <li className="cards__item">
                <Link className="cards__item__link" to={path}>
                    <figure className="cards__item__pic-wrap" data-category={label}>
                        <img src={ src } alt="Travel" className="cards__item__img" />
                    </figure>
                    <div className="cards__item__info">
                        <h5 className="cards__item__text">{text}</h5>
                    </div>
                </Link>
            </li>
        </>
    )

오류가 발생하지 않지만 단순한 이미지가 나타나지 않습니다.

Where would I keep the images folder and how access to resources from .css and .js files correctly?

  • 답변 # 1

    구성 요소에 이미지를 가져 오지 않으려면 다음과 같은 방법으로 이미지를 표시 할 수 있습니다.

    var imageName = require('./images/img-9.jpg')
    <img src={imageName} />
    
    

    여기에서는 정적 "가져 오기"에 사용이 필요하므로 가져 오기를 변경해야합니다.

    그러나 다음과 같은 방법으로도 할 수 있습니다.

    import imageName from './images/img-9.jpg';
    <img src={imageName} />
    
    

    이 작업을 수행하는 또 다른 방법입니다.

  • 답변 # 2

    파일이 src/Components/Component/Comp.css 이미지는 공용 폴더에 있습니다. 당신은 3 레벨 위로 올라 가야합니다. Comp.css 파일을 선택하여 이미지를 선택하십시오. 다음과 같은 작업을 수행해야합니다.이 방법이 작동 할 가능성이 높으며 IDE가 경로를 제안하여 경로를 지원할 가능성이 높습니다.

    <CardItem
    src="../../../public/images/img-9.jpg"
    />
    
    

    하나, 이상적인 시나리오에서는 이미지를 공용 폴더에 배치해서는 안됩니다. 대신 assets 내 폴더 src 그리고 images 폴더 내의 assets 이미지를 images 폴더.

    케이스의 경로는 다음과 같습니다.

    ../../assets/images/img-9.jpg
    
    

  • 답변 # 3

    내 해결책은 다음과 같습니다.

    const { src, text, label, path } = props
        // How I needed a dinamic solution for reuse the component, here i assign the src value and complete path to a const.
        //IMPORTANT: It is an object so we have to access to default property
        const imgSrc = require(`../../assets/images/${src}`).default
        return (
            <>
                <li className="cards__item">
                    <Link className="cards__item__link" to={path}>
                        <figure className="cards__item__pic-wrap" data-category={label}>
                            <img src={imgSrc} alt="Travel" className="cards__item__img" />
                        </figure>
                        <div className="cards__item__info">
                            <h5 className="cards__item__text">{text}</h5>
                        </div>
                    </Link>
                </li>
            </>
        )
    
    

관련 자료

  • 이전 ios - UIKit의 Xcode 문서 선택기 위임
  • 다음 postgresql - Docker에없는 Postgres에 연결하기위한 Docker 컨테이너