React 컴포넌트에 이미지(.svg, .png)를 Import하는 방법

React 컴포넌트에 이미지(.svg, .png)를 Import하는 방법

리액트 컴포넌트 중 하나에 이미지 파일을 Import하려고 합니다.웹 팩을 사용하여 프로젝트를 셋업했습니다.

여기 컴포넌트 코드가 있습니다.

import Diamond from '../../assets/linux_logo.jpg';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

이것이 제 프로젝트 구조입니다.

webpack.config.js 파일을 다음과 같이 셋업했습니다.

{
    test: /\.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS. 다른 리모트 소스에서 이미지를 얻을 수 있지만 로컬에 저장된 이미지는 얻을 수 없습니다.JavaScript Console에서도 오류가 발생하지 않습니다.무엇이든 도와 주세요.나는 반응하는 것이 꽤 처음이고 내가 무엇을 잘못하고 있는지 찾을 수 없다.

써보다

import mainLogo from'./logoWhite.png';

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

require를 사용하여 다음과 같은 이미지를 렌더링할 수도 있습니다.

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img src={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

이미지가 src/assets 폴더 내에 있는 경우 사용할 수 있습니다.requirerequire 스테이트먼트에 올바른 경로가 포함되어 있는 경우,

var Diamond = require('../../assets/linux_logo.jpg');

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

"create-react-app"을 사용하지 않는 절차는 거의 없습니다. (webpack@5.23.0) 먼저 file-loader를 devDedepencie로 설치하고 다음 단계는 webpack.config에 규칙을 추가하는 것입니다.

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
}

src 디렉토리에 declarationFiles.d.ts(예를 들어)라는 파일을 만들고 모듈을 등록합니다.

declare module '*.jpg';
declare module '*.png';

dev-server 를 재기동합니다.이러한 단계를 거친 후 코드 아래와 같은 이미지를 가져와 사용할 수 있습니다.

import React from 'react';
import image from './img1.png';
import './helloWorld.scss';

const HelloWorld = () => (
  <>
    <h1 className="main">React TypeScript Starter</h1>
        <img src={image} alt="some example image" />
  </>
);
export default HelloWorld;

typescript 및 javaccript로 동작합니다.확장자를 .ts에서 .js로 변경하기만 하면 됩니다.

건배.

다음의 조작도 가능합니다.

...
var imageName = require('relative_path_of_image_from_component_file');
...
...

class XYZ extends Component {
    render(){
        return(
            ...
            <img src={imageName.default} alt="something"/>
            ...
        )
    }
}
...

주의: 이미지가 프로젝트 루트 폴더 외부에 없는지 확인하십시오.

또한 .png 이미지를 Import해야 하는 경우에도 비슷한 요건이 있었습니다.저는 이 이미지를 공용 폴더에 저장했습니다.그래서 다음과 같은 접근법이 효과가 있었습니다.

<img src={process.env.PUBLIC_URL + './Images/image1.png'} alt="Image1"></img> 

상기 외에 require도 사용해 보았습니다만, 저에게도 효과가 있었습니다.이미지 폴더에 이미지를 src 디렉토리에 포함시켰습니다.

<img src={require('./Images/image1.png')}  alt="Image1"/>

변수를 사용하여 이미지를 동적으로 Import하려면 다음을 사용합니다.

  const imageName = "myImage.png"
  const images = require.context('../images',true);
  const [imgUrl, setImgUrl] = useState('');

  useEffect(() => {
    if (images && imageName) {
      setImgUrl(
        images(`./${imageName}`).default
      );
    }
  }, [imageName,images]);

  ...

  <img src={imgUrl} />

폴더를 만들고 이름을 지정합니다.images.ts또는images.js원하는 위치에 저장하십시오.

를 사용하여 폴더의 모든 이미지를 내보냅니다.export {default as imageName} from 'route'진술.

export { default as image1 } from "assets/images/1.png";
export { default as image2 } from "assets/images/2.png";
export { default as image3 } from "assets/images/3.png";
export { default as image4 } from "assets/images/4.png";

그런 다음 를 사용하여 이미지를 Import합니다.import {imageDefaultName} from 'route'

import {image1,image2,image3,image4} from 'assets/images'

<img src={image1} />
<img src={image2} />
<img src={image3} />
<img src={image4} />

또는

import * as images from 'assets/images'

<img src={images.image1} />
<img src={images.image2} />
<img src={images.image3} />
<img src={images.image4} />

import React, {Component} from 'react';
import imagename from './imagename.png'; //image is in the current folder where the App.js exits


class App extends React. Component{
    constructor(props){
     super(props)
     this.state={
      imagesrc=imagename // as it is imported
     }
   }

   render(){
       return (

        <ImageClass 
        src={this.state.imagesrc}
        />
       );
   }
}

class ImageClass extends React.Component{
    render(){
        return (

            <img src={this.props.src} height='200px' width='100px' />
        );
    }
}

export default App;

user5660307 answer를 사용했습니다.또한 react 및 nodejs를 사용한 서버 측 렌더링의 경우 express 서버에 다음을 추가할 수 있습니다.

app.use(express.static("public"));

및 webpack.client.dll:

module.exports = {
  entry: "./src/client/client.js",

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },

  module: {
    rules: [
      ...
      {
        loader: require.resolve("file-loader"),
        exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
      },
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve("url-loader"),
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
      },
    ],
  },
};

src 폴더의 이미지와 함께 폴더를 이동하면 문제가 해결.그리고 이미지('create-react-app'을 통해 작성된 프로젝트)로 눈을 돌렸습니다.
= document.image = document.createElement("img"); .= src = required../filength/police.png';

언급URL : https://stackoverflow.com/questions/43823289/how-to-import-image-svg-png-in-a-react-component