반응 사용이 필요할 수 있나요?

react는 require를 사용할 수 있습니다. 1. "

import user from '../img/user.png'
<img src={user} alt="" />

로그인 후 복사

1.2 방법 2

두 번째 방법도 당시에는 로컬 이미지를 읽기 위해 require 메서드를 사용할 때 오류가 발생할 확률이 높았습니다.

<img src={require(&#39;../img/icon1.png&#39;)} alt="" />

한 가지 더: require에는 변수가 아닌 문자열만 작성할 수 있습니다.

2. require

2.1 사례 1

방법 2를 사용하여 이미지를 로드할 수 없지만 런타임 중에 이미지를 로드할 수 없는 문제에 대한 해결책을 두 가지 찾았습니다. 온라인에서 이 문제에 대한 첫 번째는 다음과 같습니다.

하지만 "file-loader": "^4.2.0" 또는 "file-loader": "^2.0.0"을 사용하면 정상적으로 패키징할 수 있습니다. 나중에 file-loader가 새 버전에 있다는 것을 알았습니다. esModule의 기본값은 true이므로 수동으로 false로 설정하세요

{
  test: /.(png|jpg|gif|jpeg)$/,
  use: [{
  loader: 'url-loader',
  // loader: 'file-loader',
  options: {
  esModule: false, // 这里设置为false
  name: '[name].[ext]',
  limit: 10240 
  } 
  }]
 }

옵션 2(권장)

require('~/images/2.png').default 괜찮습니다

ps: 하지만 반응 스캐폴딩 구성을 사용하는 경우 , .default를 사용할 필요는 없지만 직접 require(url ) of

2.2 사례 2

이 사례는 제가 연구 중에 만난 내용을 바탕으로 대략적으로 제 요구 사항을 설명합니다.

먼저 저는 React를 사용하여 그런 다음 로컬 데이터를 json으로 변환해야 했습니다. 그런 다음 React를 통해 형식을 읽고 프런트엔드 인터페이스에 표시했습니다. 텍스트를 읽는 방법은 쉽습니다. 결정적인 순간에 어려운 지점이다. 그럼 제가 이 어려움을 어떻게 해결했는지 이야기해 보겠습니다.

1) 먼저 아래와 같이 json 데이터의 일부를 가로챘습니다.

{
  "success": true,
  "msg": "",
  "titleImg": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youjiIcon_38.png",
  "travelnote": [
    {
      "title": "\u8de8\u8d8a\u8d64\u9053\u7684\u871c\u6708\u884c-\u9189\u7f8e\u6bdb\u91cc\u6c42\u65af-1",
      "writer": "\u4f59\u982d\u5c0f\u59d0Rachel",
      "content": "\u82b1\u306e\u6642\u5149\u65c5\u884c \u3010\u6642\u5149\u65c5\u884c\u3011\u5e74\u8f7b\u5c31\u662f \u7528\u6765\u6298\u817e\u7684\uff0c\u6709\u529b\u6c14\u53bb\u60f3\uff0c  \u53bb\u505a\uff0c\u800c\u662f\u4e3a\u4e86\u7a33\u5b9a\u4e22\u6389\u9752\u6625\uff0c\u4e3a\u4e86\u5e73\u6de1\u4e22\u6389\u68a6",
      "img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.png"
    },
    {
      "title": "\u8de8\u8d8a\u8d64\u9053\u7684\u871c\u6708\u884c-\u9189\u7f8e\u6bdb\u91cc\u6c42\u65af-2",
      "writer": "\u4f59\u982d\u5c0f\u59d0Rachel",
      "content": "\u82b1\u306e\u6642\u5149\u65c5\u884c \u3010\u6642\u5149\u65c5\u884c\u3011\u5e74\u8f7b\u5c31\u662f \u7528\u6765\u6298\u817e\u7684\uff0c\u6709\u529b\u6c14\u53bb\u60f3\uff0c  \u53bb\u505a\uff0c\u800c\u662f\u4e3a\u4e86\u7a33\u5b9a\u4e22\u6389\u9752\u6625\uff0c\u4e3a\u4e86\u5e73\u6de1\u4e22\u6389\u68a6",
      "img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.pngg"
    }
  ]
}

2) img 필드를 가져와야 합니다

"img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.pngg"

그런 다음 img 필드를 얻었습니다. 얻는 것은 사진이 아니라 링크일 뿐이므로 사진을 표시하려면 다음 태그를 사용해야 합니다.

<img src={item.img} alt=&#39;图片未显示&#39;/>

흠, 완벽해 보이는군요. 위에 제공된 링크는 서버에 있으며 읽을 수 있고 표시됩니다. , 그러나 로컬 이미지인 경우:

"img": "@/assets/imgs/cloud/Directory.svg"

읽을 수 없으므로 이 아이디어는 마침내 통과되었습니다.

인터넷에서 다른 방법을 찾아볼 수밖에 없었고 다음 글을 발견했습니다.

"로컬 이미지를 참조하는 ES6 React 구성 요소의 문제"

이 글의 일반적인 의미는 위의 방법 1과 방법 2입니다. 이 방법은 사진이 많지 않고 프런트 엔드에 사진 경로를 직접 로드하는 문제를 해결할 수 있습니다. 그렇다면 데이터베이스에서 이미지의 경로를 읽어야 하는데 require는 변수를 쓸 수 없고 import from은 변수를 쓸 수 없다고 가정해 보겠습니다. 그렇다면 어떻게 해야 할까요? 그래서 이 글을 읽고 시도해봤는데 이해가 안되서 포기했어요.

마지막으로 require to read를 사용한 기사를 보고 마침내 내 문제가 해결되었습니다. 참고문헌 2를 살펴보세요. 여기서는 내 아이디어에 대해 이야기하겠습니다.

앞서 require()의 입력은 문자열만 가능하다고 말하지 않았나요? 따라서 img 필드를 파일 이름 + 사진 이름

예:

파일 이름: '@/assets/images/'

사진 이름: item.img의 두 부분으로 나눌 수 있습니다. collection 트래버스하려면 이렇게 작성하세요)

json에서 img 필드를 수정하세요:

"img": "logo.jpg"

마지막으로 문자열을 이어붙이는 것과 같습니다: @/assets/images/logo.jpg

require('@/assets/images/logo.jpg')

이렇게 하면 안 되나요? 우리의 목적은?

이렇게 쓸 때 읽을 수 없다면 다음과 같이 써보세요:

<img  src={require(&#39;@/assets/images/&#39;+ item.img).default} / alt="반응 사용이 필요할 수 있나요?" >

%EC%B6%94%EC%B2%9C%20%ED%95%99%EC%8A%B5:%20" href="https://www.php.cn/course/list/21.html" target="_blank">react video tutorial"

위 내용은 반응 사용이 필요할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!