Comment référencer des images en CSS ? Comment référencer des images en CSS

Comment référencer des images en CSS ? Quelles sont les étapes pour référencer des images en CSS ? Cet article vous expliquera comment référencer des images en CSS. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Écrire des images en CSS : images de référence CSS

images de référence CSS Étape 1 : Créez un nouveau dossier d'images dans le répertoire src et mettez une image

Référence CSS image Étape 2 : Insérer un bloc dans index.html

Par exemple : 9084ca87e7f82cffaf3fd15613d1231494b3e26ee717c64999d7867364b1b4a3

css La troisième étape de la citation images : Insérez l'image d'arrière-plan

pour #pic dans index.css dans le répertoire css La quatrième étape de la citation d'images css : Entrez webpack dans le terminal pour empaqueter et signaler une erreur. chargeur et url dans le terminal. -loader

npm install –save-dev file-loader url-loader

Installation réussie

Entrez dans le terminal :

Étape 5 de l'image de référence CSS : Configurez ==url-loader== dans ==module== dans webpack-config.js (url-loader inclut le chargeur de fichiers, il n'est donc pas nécessaire de configure file-loader)

//模块：例如解读CSS,图片如何转换，压缩module:{
     rules: [
         {
           test: /\.css$/,           use: [ 'style-loader', 'css-loader' ]
         },{
            test:/\.(png|jpg|gif)/ ,            use:[{
                loader:'url-loader',
                options:{
                    limit:500000
                }
            }]
         }
       ]
 },

test:/.(png|jpg|gif)/ est le nom de suffixe du fichier image correspondant.

use : C'est le paramètre de configuration qui précise le chargeur et le chargeur utilisé.

limite : les fichiers inférieurs à 500 000 B sont formatés au format Base64 et écrits en JS.

Image de référence CSS Étape 6 : Entrez ==webpack== dans le terminal pour empaqueter

Image de référence CSS Étape 7 : npm run server pour l'aperçu du navigateur

Remarque :

• [x] url-loader encapsule le chargeur de fichiers. url-loader ne dépend pas de file-loader Même lorsque vous utilisez url-loader, il vous suffit d'installer url-loader. Il n'est pas nécessaire d'installer file-loader car url-loader a un chargeur de fichiers intégré.

• Le travail du chargeur d'url est divisé en deux situations :
  

• La taille du fichier est inférieure au paramètre limite , url-loader Le fichier sera converti en DataURL (format Base64);

• La taille du fichier est supérieure à la limite, url-loader appellera file-loader pour le traitement, et les paramètres seront transmis directement au chargeur de fichiers. (En fait, nous n'avons besoin d'installer qu'un seul chargeur d'URL. Mais pour la commodité des opérations futures, nous installerons le chargeur de fichiers ici.)

• Il n'est pas nécessaire de configurer l'URL -loader Introduit ci-dessus, il vous suffit de l'introduire dans webpack-config.js lorsque vous souhaitez introduire des plug-ins. Quelle est la raison pour laquelle le fichier de ressources est introuvable ?

  Concernant le problème de référence d'image URLREWRITE.

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!