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

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

1.2 Méthode 2

La deuxième méthode est également plus couramment utilisée à cette époque, il y avait une forte probabilité d'erreurs lors de l'utilisation de la méthode require pour lire des images locales. Voici une méthode qui peut lire des images dans des circonstances normales. comme suit :

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

Encore une chose : seules les chaînes peuvent être écrites dans require, pas dans les variables.

2. Concernant la solution au problème selon lequel l'image ne peut pas être chargée à l'aide de require

2.1 Cas 1

Nous utilisons la méthode 2 pour lire l'image, mais l'image ne peut pas être chargée pendant l'exécution, j'ai trouvé deux solutions. pour ce problème en ligne, le premier est le suivant :

Mais si vous utilisez "file-loader": "^4.2.0" ou "file-loader": "^2.0.0", il peut être empaqueté normalement. Plus tard, j'ai découvert que le chargeur de fichiers est dans la nouvelle version. esModule est par défaut true, donc définissez-le 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%20recommand%C3%A9%C2%A0:%20" href="//m.sbmmt.com/course/list/21.html" target="_blank">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!