반응에서 로컬 이미지를 참조하는 방법

반응에서 로컬 이미지를 참조하는 방법

로컬 디렉토리에서 이미지를 로드하여 에 포함시키는 방법reactjs img src술래잡기?

나는 라고 불리는 이미지를 가지고 있다.one.jpeg내 컴포넌트와 같은 폴더안에 그리고 나는 두가지를 시도했다.<img src="one.jpeg" />그리고<img src={"one.jpeg"} />내 안에render기능이 있지만 이미지가 나타나지 않는다.또한 에 액세스할 수 없음webpack config그 프로젝트가 관계자와 함께 만들어졌기 때문에 제출하다.create-react-app명령줄 활용

업데이트: 이 기능은 이미지를 처음 가져올 수 있는import img from './one.jpeg'그리고 안에 그것을 사용한다.img src={img}하지만 가져올 이미지 파일들이 너무 많아서, 나는 그것들을 양식에 사용하고 싶다.img src={'image_name.jpeg'}.

우선 src를 안으로 감싼다.{}

웹팩을 에 웹팩을 사용하는 경우:<img src={"./logo.jpeg"} />

다음을 사용해야 할 수 있다:

<img src={require('./logo.jpeg')} />

---

또 다른 옵션은 먼저 다음과 같이 이미지를 가져오는 것이다.

import logo from './logo.jpeg'; // with import

아니면...

const logo = require('./logo.jpeg); // with require

그리고 플러그를 꽂고...

<img src={logo} />

특히 이미지 소스를 재사용하는 경우 이 옵션을 권장한다.

가장 좋은 방법은 먼저 이미지를 가져온 다음 사용하는 것이다.

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 

공용 폴더 내부에 자산 폴더를 만들고 그에 따라 이미지 경로를 배치하십시오.

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

need 및 . default를 사용해야 함

 <img src={require('./logo.jpeg').default} />

이미지 원본 경로를 다음 범위 내에서 줄 바꿈{}

<img src={'path/to/one.jpeg'} />

사용할 필요가 있음require사용한다면webpack

<img src={require('path/to/one.jpeg')} />

이미지를 가져오는 가장 좋은 방법은...이다.

import React, { Component } from 'react';

// image import
import CartIcon from '../images/CartIcon.png';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />

이미지를 공용 폴더에 넣거나 공용 폴더에 하위 폴더를 만든 후 해당 폴더에 이미지를 넣으십시오.예를 들면 다음과 같다.

1. "properative-prodile.jpg"를 공용 폴더에 저장한 후, 다음, 다음과 같이 액세스할 수 있다.

src={'/completative-reptile.jpg'}

2. 네가 말한대로completative-reptile.jpg에서public/static/images, 그러면 당신은 그것에 접속할 수 있다.

src={'/static/images/completative-reptile.jpg'}

이를 구현할 다른 방법을 찾았다(이것은 기능적 구성요소임).

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

도움이 되길 바래!

너는 두 가지 방법을 가지고 있다.

먼저

클래스 위에 있는 이미지를 가져온 다음 해당 이미지를 참조하십시오.<img/>이와 같은 요소

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';

export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" /> 
  }
} 

둘째

다음을 사용하여 이미지 경로를 직접 지정할 수 있다.require('../pathToImh/img')에<img/>이와 같은 요소

import React, { Component } from 'react'; 

export default class HelloImage extends Component {
  render() {
    return <img src={require(../path/myImg.svg)} width="100" height="50" /> 
  }
}

물론 여러 개의 이미지를 하나씩 가져오려는 사람들에게는 문제가 될 것이다.해결책은 이미지 폴더를 공용 폴더로 이동하는 것이다.따라서 공용/이미지/logo.jpg에 이미지가 있는 경우 해당 이미지를 다음과 같이 표시할 수 있다.

function Header() {
  return (
    <div>
      <img src="images/logo.jpg" alt="logo"/>
    </div>
  );
}

예, 원본에서 /public/을 사용할 필요 없음.

자세한 내용은 https://daveceddia.com/react-image-tag/를 참조하십시오.

나도 같은 문제를 겪었고 연구 끝에 JS에서 JSON 데이터를 상수에 넣어 해결했는데, 그 결과 이미지를 수입할 수 있었고 JSON 객체에서만 수입 정보를 알 수 있었다.예:

import imageImport from './image.png';

export const example = [
  {
    "name": "example",
    "image": imageImport
  }
]

---

<Image source={example.image}/>

1단계:import MyIcon from './img/icon.png'

2단계 :

<img
    src={MyIcon}
    style={{width:'100%', height:'100%'}}
/>    

요구 방법이 작동하려면 다음과 같이 ".default"를 추가해야 했다.

<img src={require('./path/to/image.svg').default} />

내 대답은 기본적으로 루벤과 매우 비슷하다.나는 이미지를 객체 값으로 사용한다, btw.내게는 두 가지 버전이 통한다.

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

또는

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

포장지 없이 - 하지만 그것 또한 다른 응용이다.

나는 또한 "수입" 해결책도 확인했고, 몇 가지 경우에 그것이 효과가 있다(놀랍지 않은 것은 반응의 App.js 패턴에 적용됨), 그러나 위의 경우처럼 나의 경우는 아니다.

댓글에 언급된 바와 같이, 당신은 이미지를 공용 폴더에 넣을 수 있다.이는 Create-Ract-App의 문서에도 설명되어 있다: https://create-react-app.dev/docs/using-the-public-folder/

먼저 이미지를 가져와야 함

import logo from './logo.jpeg'; // with import

그리고 플러그를 꽂고...

<img src={logo} />

바로 그겁니다.

난 이런 방법을 사용했고, 그게 효과가 있어...네가 쓸모있길 바라.

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

import React from "react";   
import image from './img/one.jpg';

class Image extends React.Component{
  render(){
    return(
      <img className='profile-image' alt='icon' src={image}/>
   );
  }
}

기본 이미지 내보내기

인스턴스 images.js에 대한 파일을 생성하고 거기서 모든 앱 리소스를 참조한 후 나중에 이미지를 표시해야 하는 다른 모든 구성 요소에서 해당 구성 요소를 가져올 수 있다.

여러 개의 이미지를 가져와 다른 구성 요소에 전달하고 싶었다.여러 개의 이미지를 한 번만 가져오면 되고, 소품만 전달하면 어떤 부품에서도 사용할 수 있는 것으로 나타났다.

import whiskey from './img/whiskey.jpg';
import hazel from './img/hazel.jpg';
import tubby from './img/tubby.jpg';

물건을 만들자.

dog = [
   { name: "Whiskey", src: whiskey }, 
   // ...
]

그리고 이미지 표시

<img src={dog.src}></img>

import image from './img/one.jpg';

class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;

자, 여러분 모두 지금쯤 그 질문에 대한 답을 알고 계시겠지만, 저는 여러분 대부분이 다른 답을 읽고 궁금해 할 수 있는 질문에 대해 다음과 같은 답을 올린다.

질문:.도대체 어떻게 50개 또는 100개의 파일을 가져오게 되는가?)

답변: api(.json) 파일을 만들고 그 안에 모든 이미지에 대한 링크를 넣고 api를 호출하는 것이 좋다.그것은 비록 약간의 시간과 지식이 걸리겠지만, 당신이 이미 알지 못한다면, 매우 쉽게 대량으로 파일을 가져올 수 있는 가장 좋은 방법이다.

참조URL: https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react