React.js에 로컬 영상 로드

React.js에 로컬 영상 로드

를 사용하여 했습니다.create-react-app이루어졌지만, 컴포넌트)에Header.js 경로: , "파일 경로":src/components/common/Header.js로딩되지 않습니다.을 사용하다

import React from 'react'; 

export default () => {
  var logo1 = (
    <img 
      //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
      src={'/src/images/logo.png'}
      alt="Canvas Logo"
    />
  );
  return (
    <div id="header-wrap">
      <div className="container clearfix">
        <div id="primary-menu-trigger">
          <i className="icon-reorder"></i>
        </div>
                    
        <div id="logo">
          <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
          <a href="/" className="retina-logo" data-dark-logo='/images/logo-dark@2x.png'>
            <img src='/var/www/html/react-demo/src/images/logo@2x.png' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
} 

를 「Do I to 」라고 쓰면,src={require('./src/images/logo.png')} 집에서는logo1 에러가 됩니다.

컴파일하지 못했습니다.

./src/Components/Common/Header.js 오류

모듈을 찾을 수 없습니다. /var/www/html/wistful/src/Components/common의 ./src/images/logo.png

제발 이 문제를 해결하도록 도와주세요.내가 여기서 뭘 잘못하고 있는지 알려줘.

에 React App사용자 가이드를 읽어보시기 바랍니다.
이것은 이것과 여러분이 가질 수 있는 다른 많은 질문들에 대한 대답입니다.

특히 로컬 이미지를 포함하려면 다음 두 가지 옵션이 있습니다.

1. 가져오기 사용:

    // Assuming logo.png is in the same folder as JS file
    import logo from './logo.png';
   
    // ...later
    <img src={logo} alt="logo" />
   

이 접근법은 모든 자산이 빌드 시스템에서 처리되며 프로덕션 빌드 시 해시가 포함된 파일 이름을 얻을 수 있기 때문에 매우 유용합니다.파일을 이동하거나 삭제한 경우에도 오류가 발생합니다.

단점은 임의의 Import 경로를 설정할 수 없기 때문에 수백 개의 이미지가 있는 경우 번거로울 수 있다는 것입니다.

2. 공용 폴더 사용:

    // Assuming logo.png is in public/ folder of your project
    <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
   

이 방법은 일반적으로 권장되지 않지만 수백 개의 이미지를 가지고 있어 일일이 Import하는 것이 너무 번거롭다면 매우 좋습니다.단점은 캐시 버스트에 대해 생각하고 이동 또는 삭제된 파일을 직접 주의해야 한다는 것입니다.

「」로를 로드하는 .local relative URL당신이 하는 것처럼. React가 있습니다.public, 네, 렇, 렇, 서, 서, your, your, your, your, your, your, your, your를 넣images폴더 안에 있습니다.그건 작동할 것이다.

React 또는 내부적으로 웹 팩을 사용하는 Javascript 모듈에서 img의 src 속성 값이 다음과 같이 문자열 형식의 경로로 지정된 경우

e.g. <img src={'/src/images/logo.png'} /> or <img src='/src/images/logo.png' />

빌드 중에 빌드된 최종 HTML 페이지에는 src=src/src/src/src.png'이 포함됩니다.이 경로는 빌드 중에는 읽히지 않지만 브라우저에서 렌더링하는 동안 읽힙니다.렌더링 시 로고일 경우.png가 /src/displays 디렉토리에 없으면 이미지가 렌더링되지 않습니다.브라우저에서 콘솔을 열면 이미지에 대한 404 오류를 볼 수 있습니다.당신은 /src 디렉토리가 아닌 ./src 디렉토리를 사용하려고 했던 것 같습니다.이 경우 브라우저에서는 개발 디렉토리 ./src를 사용할 수 없습니다.페이지가 브라우저에 로드되면 브라우저는 'public' 디렉토리의 파일만 사용할 수 있습니다.따라서 상대 경로 ./src는 퍼블릭/src 디렉토리로 간주되며 로고가 있는 경우입니다.png는 public/src/src/directory에 없습니다.이미지를 렌더링하지 않습니다.

이 하거나 를 사용하는 입니다.import ★★★★★★★★★★★★★★★★★」requireReact 또는 Javascript 모듈에서 키워드를 사용하여 빌드 단계에서 웹 팩에 이 경로를 읽고 최종 빌드 출력에 이미지를 포함하도록 알립니다.이 두 방법의 자세한 내용은 Dan Abramov에 의해 답변에서 자세히 설명되어 있습니다.이 방법을 참조하거나 https://create-react-app.dev/docs/adding-images-fonts-and-files/링크를 사용하십시오.

여기에는 저보다 더 많은 전문가 의견과 좋은 답변들이 있습니다.하지만 저는 저의 경험과 저에게 효과가 있었던 것들을 공유하겠습니다.단순한 이미지 포함에만 너무 많은 것이 있다는 사실에 짜증이 났다.그래서 내가 한 일은...

별도의 컴포넌트(파일) myimages.jsx를 만듭니다.

import image1 from "../img/someimage.png";
import image2 from "../img/otherimage.png";

const ImageData=[image1,image2,image3]
export default ImageData;

그런 다음 이 ImageData 컴포넌트를 이미지를 사용하여 파일(컴포넌트)I에 Import했습니다.이렇게 하면 모든 이미지를 얻기 위해 컴포넌트를 '폴더'로 만들 수 있습니다.말씀드렸듯이, 전문가는 아니지만, React에서 이미지를 빠르게 Import할 수 없는 것에 대한 불만을 해소했습니다.

여기에는 다양한 방법이 있습니다.다음은 예를 제시하겠습니다.

import myimage from './...' // wherever is it.

src에 입력하기만 하면 됩니다.

<img src={myimage}...>

공식 문서는 https://facebook.github.io/react-native/docs/image.html 에서 확인할 수도 있습니다.

이미지를 React..js를 해야 .require또는 이미지 태그와 같은 미디어 섹션의 파라미터는 다음과 같습니다.

image={require('./../uploads/temp.jpg')}

In React.js latest version v17.0.1, 
we can not require the local image we have to import it.

like we use to do before = require('../../src/Assets/images/fruits.png');

Now we have to import it like = 
import fruits from '../../src/Assets/images/fruits.png';

Before React V17.0.1 we can use require(../) and it is working fine.

img src=div를 사용하는 대신 div를 생성하고 background-image를 원하는 이미지로 설정하십시오.

지금은 그게 나한테 효과가 있어.

예:

App.js

import React, { Component } from 'react';
import './App.css';



class App extends Component {

  render() {
    return (
      <div>
        <div className="myImage"> </div>
      </div>
    );
  }
}

export default App;

App.css

.myImage {
  width: 60px;
  height: 60px;
  background-image: url("./icons/add-circle.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

가장 좋은 방법은 js 파일에 이미지를 Import하여 사용하는 것입니다.공용 폴더에 이미지를 추가하면 다음과 같은 단점이 있습니다.

• 공용 폴더 내의 파일은 최소화되거나 후처리되지 않습니다.

• 이미지에 해시 이름(Webpack 설정에서 설정 필요)을 사용할 수 없습니다.해시 이름을 여러 번 변경해야 합니다.

• 런타임(컴파일)에 파일을 찾을 수 없어 클라이언트 측에서 404 오류가 발생합니다.

'를 .src디렉토리에서 원하는 이미지를 저장할 수 있습니다.

다음과 같은 폴더 구조를 만듭니다.

src->images->linechart.png

그런 다음 이러한 이미지를 JSX 파일로 가져옵니다.

import linechart from './../../images/linechart.png'; 

그러면 아래와 같은 이미지 src에서 사용해야 합니다.

<img src={linechart} alt="piechart" height="400px" width="400px"></img>

Base64는 필요 없습니다.아래 그림과 같이 이미지 경로와 치수를 알려주세요.

import Logo from './Logo.png' //local path
    
var doc = new jsPDF("p", "mm", "a4");
var img = new Image();
img.src = Logo;
doc.addImage(img, 'png', 10, 78, 12, 15)

언급URL : https://stackoverflow.com/questions/44154939/load-local-images-in-react-js