React assets importēšana lietotnē trīs dažādos veidos

Šajā rakstā es demonstrēšu dažādus attēlu parādīšanas veidus React lietotnē.

Jūs uzzināsiet trīs dažādus veidus, kā parādīt attēlu un īpaši reaģēt uz lietotni, izmantojot importēšanas paziņojumu, izmantojot pieprasījumu, lai iestatītu faila ceļu, vai norādot attēla URL no cita  Lai parādītu, kā varat strādāt ar iegultiem (embed) līdzekļiem, esmu izveidojis pamata lietotni. Savā lietotnes src mapē es pievienoju assets mapi, kurā ir arī bildes mape.

Lai skatītu lietotnes komponenta kodu, es atveru failu app.js. izdzēšu visu tur esošo aplikācijas noklusējuma kodu un rakstu iekšā savu nepieciešamo kodu:

function App() {

return (

<div>

<h1>

Uzdevums: pievieno trīs attēlus ar pielāgotu izmēru.
</h1>
</div>

);

}

export default App;

Ņemiet vērā, ka manas lietotnes komponenta sākuma kods atrodas tieši zem teksta, kas apraksta veicamo uzdevumu, proti, parādīt trīs attēlus ar noteiktu stilu. Šim nolūkam es demonstrēšu trīs atšķirīgus attēlu importēšanas un reaģēšanas veidus.

Pirmais veids ir izmantot importēšanas metodi, un es vēlos parādīt, kā jūs iestatāt nosaukumu savam importētajam attēlam. Šim piemēram es lietošu nosaukumu “bildite” lai vēlāk kodā izsauktu importētu attēla failu attels.jpg, es ierakstu sekojošu kodu:

import bildite from './assets/bildes/attels.jpg';

Šajā piemērā mans fails atrodas attēlu mapē, kas atrodas src mapē.

Tālāk es atveidošu šo attēlu kā attēla atzīmi. Savā kodā es izmantoju augstuma atribūtu, lai ierobežotu attēla izmēru, padarot tā augstumu tieši 200 pikseļu lielu. Es iestatu avota atribūtu uz bildite vērtību, kas satur ceļu uz attēla failu. Visbeidzot, lai iegūtu labāko praksi, es pievienoju alt atribūtu ar attēla pamata aprakstu.

import bildite from './assets/bildes/attels.jpg';


function App() {
  return (
    <div>
      <h1>
        Uzdevums: pievieno trīs attēlus ar pielāgotu izmēru.
      </h1>
      <img
      height={200}
      src={bildite}
      alt="vienkārša reprezentējoša bilde"
      />
</div>
  );
}


export default App;

Es saglabāju savu failu un ievēroju, ka mans attēls tagad tiek parādīts pārlūkprogrammā.

Labi, tas ir viens no veidiem, kā importēt attēlu, izmantojot importēšanas priekšrakstu. Otrs veids, kā importēt attēlu, ir izmantot atslēgvārdu require. Lai to izdarītu, es izveidoju šo attēlu ar img tagu, lai tas darbotos tāpat kā iepriekš. Atkal es ierobežoju attēla izmēru, padarot tā augstumu tieši 200 pikseļu. Bet šoreiz es iestatīju avota atribūtu uz require, es nododu attēla relatīvo ceļu vajadzīgajai funkcijai. Ceļš tiek nodots kā virknes datu tips, tāpēc ceļš ir ievietots dubultpēdiņās. Vēlreiz, lai pabeigtu attēla kodu, es pievienoju attēla aprakstu alt  atribūtam, es saglabāju savu kodu un tagad parādās otrais attēls.

import bildite from './assets/bildes/attels.jpg';


function App() {
  return (
    <div>
      <h1>
        Uzdevums: pievieno trīs attēlus ar pielāgotu izmēru.
      </h1>
      <img
      height={200}
      src={bildite}
      alt="vienkārša reprezentējoša bilde"
      />
<img src={require("./assets/bildes/attels.jpg")}
      height={200}
      alt="vienkārša reprezentējoša bilde"
      />
</div>
  );
}


export default App;

Ņemiet vērā, ka, izmantojot šo pieeju, attēls nav jāimportē. Es vienkārši to pieprasu un sniedzu virknei relatīvo ceļu uz attēlu.

Tagad es parādīšu trešo veidu, kā importēt attēla līdzekli, ielādējot attēlu no interneta resursa URL. Lai to izdarītu, es izveidoju mainīgo, ierakstot const Tagad es varu pievienot savu trešo attēla elementu atgriešanas priekšrakstā. Lai to izdarītu, es pievienoju izlases attēla URL avota atribūtam.

kopā viss kods tagad izskatās šādi:

import bildite from './assets/bildes/attels.jpg';
const attelsNoCitaResursa = "https://i.postimg.cc/4N02TLkH/attels.jpg";


function App() {
  return (
    <div>
      <h1>
        Uzdevums: pievieno trīs attēlus ar pielāgotu izmēru.
      </h1>
      <img
      height={200}
      src={bildite}
      alt="vienkārša reprezentējoša bilde"
      />


      <img src={require("./assets/bildes/attels.jpg")}
      height={200}
      alt="vienkārša reprezentējoša bilde"
      />


      <img
      src={attelsNoCitaResursa}
      height={200}
      />




    </div>
  );
}


export default App;

Tātad jums tas ir. Trīs dažādi veidi, kā izmantot attēla līdzekļus reaģēšanas komponentā.