L'utilisation de la réaction peut-elle être nécessaire ?

react peut utiliser require. La méthode d'utilisation correcte est : 1. Lisez l'image via la méthode "

import user from &#39;../img/user.png&#39; <img src={user} alt="" />

1.2%20M%C3%A9thode%202

La%20deuxi%C3%A8me%20m%C3%A9thode%20est%20%C3%A9galement%20plus%20couramment%20utilis%C3%A9e%20%C3%A0%20cette%20%C3%A9poque,%20il%20y%20avait%20une%20forte%20probabilit%C3%A9%20d'erreurs%20lors%20de%20l'utilisation%20de%20la%20m%C3%A9thode%20require%20pour%20lire%20des%20images%20locales.%20Voici%20une%20m%C3%A9thode%20qui%20peut%20lire%20des%20images%20dans%20des%20circonstances%20normales.%20comme%20suit%C2%A0:%20

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

Encore%20une%20chose%C2%A0:%20seules%20les%20cha%C3%AEnes%20peuvent%20%C3%AAtre%20%C3%A9crites%20dans%20require,%20pas%20dans%20les%20variables.%20

2.%20Concernant%20la%20solution%20au%20probl%C3%A8me%20selon%20lequel%20l'image%20ne%20peut%20pas%20%C3%AAtre%20charg%C3%A9e%20%C3%A0%20l'aide%20de%20require

2.1%20Cas%201

Nous%20utilisons%20la%20m%C3%A9thode%202%20pour%20lire%20l'image,%20mais%20l'image%20ne%20peut%20pas%20%C3%AAtre%20charg%C3%A9e%20pendant%20l'ex%C3%A9cution,%20j'ai%20trouv%C3%A9%20deux%20solutions.%20pour%20ce%20probl%C3%A8me%20en%20ligne,%20le%20premier%20est%20le%20suivant%C2%A0:%20

Mais%20si%20vous%20utilisez%20" file-loader ou il peut empaquet normalement. plus tard j d que le chargeur de fichiers est dans la nouvelle version. esmodule par true donc manuellement sur false>

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

L'option 2 (recommandée)

require('~/images/2.png').default est très bien

ps : Mais si vous utilisez la configuration d'échafaudage React. , vous n'avez pas besoin d'utiliser .default, mais directement require(url ) de

2.2 Cas 2

Ce cas décrit grossièrement mes besoins en fonction de ce que j'ai rencontré au cours de mon étude :

Tout d'abord, j'ai utilisé React pour créer un système de gestion backend, puis j'ai dû convertir les données locales en json. Le format est ensuite lu et affiché sur l'interface front-end via React. Mon fichier contient du texte et des images. Le texte est facile à lire. est un point difficile au moment critique. Alors laissez-moi parler de la façon dont j'ai résolu cette difficulté :

1) Tout d'abord, j'ai intercepté une partie de mes données json comme indiqué ci-dessous :

{
  "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) J'ai besoin d'obtenir le champ img

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

Ensuite, nous avons obtenu le champ img, ce que vous obtenez n'est qu'un lien, pas une image, vous devez donc utiliser la balise suivante pour afficher l'image :

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

Hmm, ça a l'air parfait. Le lien donné ci-dessus est sur le serveur et peut être lu et il est affiché. , mais si c'est une image locale :

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

on ne peut pas la lire, donc cette idée est finalement passée.

Je n'ai pas eu d'autre choix que de chercher d'autres méthodes en ligne et j'ai trouvé l'article suivant :

"Le problème des composants ES6 React référençant des images locales"

La signification générale de cet article est : la méthode 1 et la méthode 2 ci-dessus Cette méthode peut résoudre le problème du manque d’images et du chargement du chemin de l’image directement sur le front-end. Supposons donc que vous ayez besoin de lire le chemin de l'image à partir de la base de données, que require ne puisse pas écrire de variables et que import from ne puisse pas écrire de variables, alors que devez-vous faire ? Alors après avoir lu cet article, je l’ai essayé et je ne l’ai pas compris, alors j’ai abandonné.

Enfin, j'ai vu un article utilisant require to read, qui a finalement résolu mon problème. Vous pouvez jeter un œil à la référence 2. Ici, je vais parler de mes idées.

N'ai-je pas dit auparavant que l'entrée dans require() ne peut être que des chaînes ? Nous pouvons donc diviser le champ img en 2 parties : nom du fichier + nom de l'image

Par exemple :

Nom du fichier : '@/assets/images/'

Nom de l'image : item.img (C'est ce que j'ai passé via le collection A parcourir, alors écrivez-le comme ceci)

Modifiez le champ img en json:

"img": "logo.jpg"

Enfin, cela équivaut à l'épissage de chaînes: @/assets/images/logo.jpg

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

Est-ce que cela n'atteint pas notre objectif ?

Si vous n'arrivez pas à le lire lorsque vous l'écrivez comme ceci, alors écrivez-le comme ceci :

<img  src={require(&#39;@/assets/images/&#39;+ item.img).default} / alt="L'utilisation de la réaction peut-elle être nécessaire ?" >

Apprentissage recommandé : "tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!