Lassen Sie uns darüber sprechen, warum die dynamische Einführung von Bildern in vue erforderlich ist

Ich glaube, dass Freunde, die Vue verwendet haben, vom Interviewer eine solche Frage gestellt bekommen haben: Warum verwenden Sie require, um Bilder dynamisch in Vue zu importieren?

Einige Freunde werden vielleicht verächtlich lächeln: Heh, das ist es, weil die dynamische Hinzufügung von src als statische Ressource behandelt und nicht kompiliert wurde, also muss ich require hinzufügen, und ich kann es rückwärts aufsagen ...

emmm... Auf den ersten Blick scheint es Sinn zu machen, aber wenn man genau hinschaut, was genau sagt dieser Satz aus? Als Antwort auf die obigen Antworten komme ich nicht umhin, folgende Fragen zu stellen:

Was sind statische Ressourcen?
Warum werden dynamisch hinzugefügte src als statische Ressourcen behandelt?
Nicht kompiliert, bedeutet was nicht kompiliert?
Warum können Ressourcen korrekt mit require importiert werden, obwohl sie mit require kompiliert werden können?

Als ich die letzte Frage hatte, stellte ich fest, dass die obige Antwort etwas zu sagen schien, aber nichts zu sagen schien ... Wenn Sie die gleichen Fragen wie oben haben, lassen Sie es mich Ihnen einzeln sagen

1. Was ist eine statische Ressource?

Es gibt auch eine dynamische Ressource, die der statischen Ressource entspricht.Lassen Sie uns zuerst sehen, wie die großen Jungs im Internet es erklären.

Statische Ressourcen: Im Allgemeinen sendet der Client eine Anfrage an den Webserver, und der Webserver ruft die entsprechende Datei aus dem Speicher ab, sendet sie an den Client zurück, und der Client parst und rendert sie zur Anzeige.

Dynamische Ressourcen: Für dynamische Ressourcen, die vom allgemeinen Client angefordert werden, wird die Anforderung zuerst an den Webcontainer gesendet, und der Webcontainer stellt eine Verbindung zur Datenbank her. Nachdem die Datenbank die Daten verarbeitet hat, wird der Inhalt an den Webserver übergeben und der Der Webserver gibt es zur Analyse und zum Rendern an den Client zurück.

Tatsächlich ist die obige Zusammenfassung bereits sehr klar. Aus Sicht eines Vue-Projekts können wir es einfach so verstehen:

Statische Ressourcen sind Ressourcen, die direkt im Projekt gespeichert sind, und für diese Ressourcen müssen wir keine speziellen Anfragen senden, um sie zu erhalten . Zum Beispiel Bilder, Videos, Audios, Schriftdateien, CSS-Stylesheets usw. im Assets-Verzeichnis.

Dynamische Ressourcen sind Ressourcen, die durch Senden von Anfragen abgerufen werden müssen . Wenn wir beispielsweise Taobao durchsuchen, werden verschiedene Produktinformationen durch das Senden spezieller Anfragen abgerufen, die als dynamische Ressourcen bezeichnet werden können.

2. Warum werden dynamisch hinzugefügte src als statische Ressourcen behandelt?

Bevor wir diese Frage beantworten, müssen wir verstehen, wie ein Browser ein Vue-Projekt ausführen kann.

Wir wissen, dass ein Browser, wenn er eine Webseite öffnet, tatsächlich drei Arten von Dateien ausführt: HTML, CSS und JS. Wenn wir ein Vue-Projekt lokal starten, packen wir das Vue-Projekt tatsächlich zuerst.Der Paketierungsprozess ist der Prozess des Konvertierens und Kompilierens jeder Vue-Datei im Projekt in HTML-, CSS-, JS-Dateien und dann im Browser In Bearbeitung.

Wenn wir require nicht zum Importieren des dynamisch hinzugefügten src verwendet hätten, wie würde es am Ende aussehen?Ich werde Sie zum Experimentieren mitnehmen.

// vue文件中动态引入一张图片
<template>
  <div class="home">
      <!-- 通过v-bind引入资源的方式就称之为动态添加 -->
    <img :src="'../assets/logo.png'" alt="logo">
  </div>
</template>


//最终编译的结果(浏览器上运行的结果)
//这张图片是无法被正确打开的
<img src="../assets/logo.png" alt="logo">

Wir können sehen, dass der dynamisch hinzugefügte src schließlich in eine statische Zeichenfolgenadresse kompiliert wird. Wenn das Programm läuft, importiert es Ressourcen entsprechend dieser Adresse in das Projektverzeichnis. Die Möglichkeit zum Importieren von Ressourcen in das Projektverzeichnis besteht darin, die Ressourcen als statische Ressourcen zu behandeln . Damit ist auch unsere Frage 2 beantwortet.

Einige Freunde könnten verwirrt sein, wenn sie dies sehen. Gibt es ein Problem mit der Adresse, die schließlich zusammengestellt wird? Das Bild in meinem Projekt ist diese Adresse, warum kann es nicht importiert werden? Keine Sorge, schauen wir weiter nach unten.

3. Nicht kompiliert, was bedeutet nicht kompiliert?

Es findet keine Kompilierung statt. Dieser halbe Satz ist sehr verwirrend zu hören. Gemäß Frage 2 wissen wir, dass das dynamisch importierte Bild endgültig kompiliert ist, aber die Bildressource kann nach dem Kompilieren nicht korrekt importiert werden. Dieser Satz ist also falsch. Für unsere Standardantwort schreibe ich sie hier um:

Da das dynamische Hinzufügen von src als statische Ressource behandelt wird und der kompilierte statische Pfad Ressourcen nicht korrekt importieren kann, wird require hinzugefügt

Dann stellt sich hier eine neue Frage: Warum kann der kompilierte statische Pfad Ressourcen nicht korrekt importieren?

Um die Antwort auf diese Frage zu erhalten, müssen wir damit beginnen, ein Bild in der Regel einzuführen. Wenn wir im Projekt ein Bild statisch importieren, kann es auf jeden Fall erfolgreich importiert werden, und die Vue-Datei, in der sich das referenzierte Bild befindet, muss auch kompiliert werden, also in was wird das statisch importierte Bild am Ende kompiliert? Welle:

// vue文件中静态的引入一张图片
<template>
  <div class="home">
      <!-- 直接引入图片静态地址， 不再使用v-bind -->
    <img src="../assets/logo.png" alt="logo">
  </div>
</template>


//最终编译的结果
//这张图片是可以被正确打开的
<img src="/img/logo.6c137b82.png" alt="logo">

Gemäß dem obigen Test haben wir festgestellt, dass sich bei Verwendung einer statischen Adresse zum Importieren eines Bildes der Pfad und der Name des Bildes geändert haben und die kompilierte statische Adresse Ressourcen erfolgreich importieren kann. Dies liegt daran, dass standardmäßig alle Dateien im src-Verzeichnis gepackt werden und Bilder unter src ebenfalls in einen neuen Ordner gepackt werden und einen neuen Dateinamen generieren. Die kompilierte statische Adresse leitet die gepackte Bildadresse ein, sodass Ressourcen korrekt referenziert werden können

Ist dies wirklich der Fall? Wir können den Paketierungsbefehl (npm run build) ausführen, um dies zu überprüfen

Es kann festgestellt werden, dass die kompilierte statische Adresse tatsächlich mit der kompilierten Bildadresse unter dist übereinstimmt, wodurch unsere Idee verifiziert wird.

An dieser Stelle können wir die obige Frage tatsächlich erklären: Warum können der dynamisch hinzugefügte src und der kompilierte statische Pfad Ressourcen nicht korrekt importieren?

Da die kompilierte Adresse der dynamisch hinzugefügten Quelle nicht mit der kompilierten Ressourcenadresse der Bildressource übereinstimmt, kann die Ressource nicht korrekt importiert werden

编译过后的src地址：../assets/logo.png
  编译过后的图片资源地址：/img/logo.6c137b82.png

Wie man also die oben genannten Probleme löst, lautet die Antwort: erfordern

4. Warum können Ressourcen korrekt mit require importiert werden, weil sie mit require kompiliert werden können?

Um dieses Problem zu lösen, müssen wir zuerst die zweite Hälfte des Satzes negieren, unabhängig davon, ob require hinzugefügt wird oder nicht, wird ein in die vue-Datei eingeführtes Bild kompiliert.

Dann schauen wir uns require genauer an.

4.1 Was ist erforderlich: Es ist eine Knotenmethode, die verwendet wird, um Module, JSON oder lokale Dateien einzuführen

4.2 Was geschah nach dem Aufruf der require-Methode, um ein Bild einzufügen:

Lassen Sie mich vor der Beantwortung dieser Frage einige inhaltliche Ergänzungen zu Frage 3 vornehmen. Wenn einige Freunde wirklich den Vorgang in Frage 3 befolgen, um dies zu überprüfen, wird geschätzt, dass sie gesprüht werden: Warum unterscheidet sich die endgültige kompilierte Adresse des Bildes, das ich statisch importiert habe, von Ihrer, es ist eine base64, und nach dem Verpacken, es werden unter dist keine neuen Bilder generiert. Wahrscheinlich folgende Situation.

<template>
<div class="home">
    <!-- 直接引入图片静态地址， 不再使用v-bind -->
  <img src="../assets/logo.png" alt="logo">
</div>
</template>


//最终编译的结果
//这张图片是可以被正确打开的
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd1XVe53XvvD2eGQ/lXQcKuDwc2eFlCAGnUn7kT6T86J/+aNTgsWPchJJYciEOCQ8hF+G0hFCIHRSEqAuJBCqRaUEIEbmBppAIBGnESwZje8COZ+y587j3PLq+ffadGJix53HvPevcuz60xPjec89ZZ+39nf04+9vLSZKEFArFzHA1BAqFEkShUIIoFEoQhUIJolAoQRQKJYhCoQRRKJQgCoUSRKFQKEEUCiWIQrFo+Gv/8/YH+f/nsMWSHHMChyhxqPTTdyncWyJ3ScD/ztipiB3wXSqu6P17avN+TyFC5ggv4tRnmoxWTP1+5F+Mz17GPvPl49EKBWd3UsfXllPiso8VcYtmPba3fNuKrBVXrGFCbrdPwXndFL49ltI367roOpSUI4pGypv9s7q+ltj6JxqOQ07Bo/DgxGb2/a8cX0CnAWXJ5etz2TqdHiXHKlKj9w6i9XX8Ic41DmI8FVHhmmXk85MmRhCzJoiTWnig9LfJRHihgydxzAxJhBr7Bh/hK3yu+p9568FliTJF2aKMZfVd/kQOcKP6OBmS9+Rjm4zJ6faoeN0gOUn61MncLX4CJ+MRhe+P/dRxhfew2Df4CF/hs4jWg8vQYUKYMuWyRRkLjeHQ8YP0Z9mekVjA8Qj3VVcuoeDiXu63lkUE0ym6FA5PXBaNVr7qtPumGyPR4Bt8hK/wWUR5chn6XJYoU5StUHL8l+XEx2axhkS6yk+chJuP4rXLyOkIKJkS0B67adcqfL/0Y4pixxSysK6V8Yl9Mz7i3272NRFlhzJsu24Z5l9E9Ahmwfrpoj7uw3fZtktsRZKjIXnndlLxin7+W8ZTBwPf6I+Tg9HwxK2Ob8citbCoBoaxBxMCvsFH+CqjHCtUvLzflKWUcpwB91gupG5f9/Rtx39ZZBtmWyJtphKzHTQW0diP36b4aJmcLj/zGaSkHJPb4SWFi/tOJd8bTqd9s48VBRh4RKeUX/vjgXg8cpyCmz05xkJylxSoa8M5RF0eJaVIIkGOsg2yTc3UgpD94psiWxEOqDNYoOIXuHnGwE5AXUTFi46FTnRw4l/dwEm7/pSxcYnCF/gE3zInh52RRJkVP7/MlKFQcgCbjifHTAQBfsb2qsgBO3e1Cpf3UXBej3nRJKKrxU/rcH/pKzz4vNIQuRJTEmZklbg6EL4SPsE3GQPzinmfhbJDGQolB+r8w58abs5y8DqRt4ABeptLRR7koY9NleybEYw/MPisvF/ayT1/SvDewcnIcG32wfiCAbEvoCZyGaGsitdyz6XdTctQJq6fcT5mloNfYvu5yFZkpEz+RT0UrFoqpxVBV+vQxIrkaPnrbqdvXs6hcjbU+Jq4Nvvwd/BFRNeq2npwWfkX95iyE9p6PM72P/MhCPANTBSKu5WITHcC074Y9CUTkYglKBgcV/aVtlM5Kpp/RHFjDdfka7MP/2wG6m72661QNigjlBXKTGBtsjWKNs5atCf44Uds3xc5YD8Wknd2BxWuGjCzIxLWQzlFj+IjU108OL7bafM5sm5DDdfka/8T+9AJXyTMpqFsUEYoK5SZ0NbjVlvX500Q4Ha2A+JuCcEvhVS8qp/8MzspHhMSfO7mVPaP35BMRp9JsCQldbX+hmvxNfnamzJfqVvtWnGZoGxQRigroYs6UbfvOGHn4ORVkTaIbEWwtqg3MNO+Zql0JGCdVuCayhDuG9uJB7vp+oR17FbZc+NauCauLWLmKkqXr6NsUEYoK6GtxwY6CXXnEs0n2faIHLCPhhR8bikFKwRN+xZddHWu5a7Ol9yCZ2ZwHKdOxufGNeKRqS/hmnLWW1VMmQSrl5oyEkqOPbZu02IJAsic9sU7B+5uF9cOmqUfeLOdOaAZYb/CA+M/Ic9NxUoYMNfD/PT84f7xB807EAnrrbgMUBZt1w1SEpCIqfjF1Om5EuQNth0iu1r8tPLP76LCpX2yWpHDk2dGH018p6brtD5hOHf04cR3okOTZ0lqPVAW3gVdlMhdrfsTW6drRhDgRrYJcbeKZQxTkenvegNt6YBQwrQvOxG+P3ZHEia9TuClS9Br1XKge8XnxLlxjelzZ/2w4tijDMxyoHIsVQg1zvYPcy7KeZx4jG2zyFakFJF7Whu1XT2QvhfJeryeVNdplYPo4Pi9hKd7VVxVC8O5cH4+N65hXgoKuGfEHmWAskjGxI49Ntu6XHOCAD9ie1PcLSepjDNY00fB8m6KpSyJx/jgg9LfJEfLK40818w+LXY5e5zKaMfKl+DcIlSCZp0cd3U59igDI4+WOa2LunvfvDoD9RrcNLqAjDy3yzfrtKqbAkggSDIZmSlYxzz9a8BaJ101zF2rh3BuSTJaCKGMDEGujHbedXch0X2ebbdEkkDC6a9cQoWVguS53P0JP5xcHY1W/tppD9KxgrdAw5QxnwPn4nOukrPeqkzBJb0m9oJltLtt3a07QYD1IkMAeS7/hw0BXMhzJwXJc/eV7kuiyIN8OOGuUhLP06JUeoxz4FxiZLRouTsDM9WO2OdBRtsIgrzHtk3kgH00JO+cTipc2S9jqyCaluf2xwcnfuB6LndHuEsSzdP4N/gtzoFzSZHRIsaQQiPmidyXgttsnW0YQYDvsh2ROGBPxkMqXjNA/qlCFsnZ8UdlX+kfk0pymlnMWH2JOBfz0sWI+C3OMS1dzPphhPVWHOPC5wdMzIUOzFFHb1lwB2ARF+ZOPt0gshWBPLe/wCRZlu6CIkSei/cE0fD4g2ZbVWceyxH5WPwGvzXrrSTJaDnG7oBoGS3qaCULggCPsv1W5IAd8tzLllJwvpx1WthMIfyg9OVotHy1WVQ4V37wsfgNfkuSZLQcW8Q4lruU/RVbRykrggDXiwwN3uQWnXTa1xMkz2W/on2lndNajpNtAGePw2/MOicBMlqs+8K7GBNbjrFgGe2iX0nUgiAvs+0S2YpgndaFPVRc3SdmVanZlfGjifOiw5PrT/oGvPpG/vDkEH4jZ70Vt86rl5rYimmdP41/s3Uzc4Isup9XNxwvz+0tyNAlONPrtO6hctR+QnluKqNt52O3pxvtClhvxTH0egtmEwbBMlrUxU21OFGtCHKYbavIATv3j90z26kIea4QZRtahfhIuT0anrjH7O3rpjNVHzPIaLG3Lh8Tj5TbRQihjlNyehxTwTLarbZOiiEIcBfbPnGhMtroChXW9JN/VqeYdyPEY4nwwPj6ZCL8C1T+T61JhDqRv8MxZgwlJG2BxzEsrBmgeEzseqt9ti6SNIIA8t6wm901eFDZ66d7M4UkQ56LVgTTvvtKaRqFqoTWymjxGb6LpUzrImYcuzaOIWKJmAptPWpaB2sd+V+yvSB1wB6s7qXgwiUyBpbJdBqFq6MjU18mKCKhRsTyEbx558/wnRmYJzLiV+DYBat6JQ/MX7B1UCxBAKHy3IQrH6W7MhY9MWkUMNAN948/8Mm35/jMDIKlpC3gmBWQtsAjifkE61b36kGQP7DdL7KrVZXnXiYpjYKZxj09Gh7f4kB4yIa/8ZmU1brIIYiYIXaJ3Nbjflv3xBME+DZbSVwIzfIIK89dJkSea18Ihu+XflD9yPztCJnW5Ri5VRntpNh8giVb5ygvBIHu9yaRrchYRO6fFU0CSTPQlDLte6zshx9O3g3D3yJajySd4EDaAsQMsRPaetxk61zty+YTCXRqjf9jO19cOLnyYV+p8QffpcreMXJ7BeRgh77Ds6SIYhGbMBgB2tld1DW0nGL4VxbZfKBbdUHdhol1dl7mOi0MOjttGgWT11lAwU9r1mMSsX0oxwSxgYyWOvKXtiAvBPkV239I7GqZdVqX9FDw2V5+UoYipn2nt/WRMK3LMQlW9poYCZ7WfcrWsdwSBNggMrRYdcLdhjas0+q28lzJOc8bOU7jWLh2AwzEyLxclYm6Z2ZuBEE+YLtTZEVA9tzPdBh5biJ3q5rGD8yRjXbNAPkcm0RuyjTUqf3NQBDge2yHJFaGeDyi4tUD5J3WIXmzs8Y9NDgG3un80OCYIDZCHxqHbJ2iZiEIGmnB8twgzYIkd7vMxiBON59GLJyBQLKMdiM1qOPXyMn2f2f7X5EDdshzkUbhAtED0oZMXCAGiIXgtAW/YXusURdr9NsoufLcgmP20zKy2ErrNSNGRuunMUAshL7zABq61q/RBPkd2yNSn57+X3ZTQZA8t7H3H5p7RwwEt6KP2DrUtAQBIIUsiwt99Kf+tydFntuocVhVRltNWyBTRlumGslopRNkhO1mkRVlLCT3jHYzqyU48WSN+1ZWRou0BZDRyp3Ju9nWnaYnCHA3216JlQWy0gKy557dJSaNQn0nKNL1VrhnwTLavbbOUKsQBBApzzVpFHqsPFdIGoW6AfeG7cMwrcv3TC0io80LQZ5me07kU3WkYqSlhYvkpFGoz8C8bO7RyGjlpi14ztaVliMIIFOeizQKbpI+WdsDGfLcWvcmsaK53b4gdUW3lENZXjxrgrzNdq/IAftohbzzOql4eV/zjUUcu96K7w33KFhGi7rxVisTBEBSxWPiiqYqz71mGfmDQuS5tSIHstHyPZnd7+XKaI+RgKSxEggySWmKaXkVaSwi5xSbRmGiSdZpxVZGy/eEexMso73R1o2WJwiwk+11kQNZrNO6oo+Cc7vz39Wy07q4l+CKfnNvQu/ndVsnSAkifcCOAXq7R8W1y9JdRvI87QvfnTRtgdPeujLavBLkv9meEPnUHS2Tf1EPFT67lOKRnE77munrsrkH/+IeydPXqAO/VoLMDMhz5T2irTzXpFHoKeRPnluV0XYX0mlduTLamIRJtKUR5CDbbSIrGPfX/eUdVFyTQ3luku6OaNIW/HmH5LQFt9k6oAQ5Ab7PNiyxkmGndUhRvTNyJM9F1wrZaM9IZbQmG63MocewxIejRIKg+DaKbEXGI3KWBtT2hUFKyonUZeEfB3xkX4vsM3wXvIx/IwmMqCu0WH/B9qLIpzG6Wp/rpWBFj/x1WnaCAb4G7LPgad0XbZmTEmTukDnti0yzgZvKcwNPtDzXyGjZR5ONFincVEbbVAR5je0hkU/lkTL5F3TZzQ2EvjysJr1hH/0LuiVPTz9ky1oJsgB8iwQsN5hplISns5Hn9hXl9eurMlr2zUzrVsQuk5m0ZUxKkIXhKNsWkQN2yHNPhzx3WbqQMRZGYCOjXWZ8FDzjtsWWsRJkEfgh2zvyOvhWnovsucu75GTPtdlo4RN8i+W+s3nHli0pQRaPIXEeVeW53V46YJciz2Uf4IvxiX0juW/9h/JQ8fJCkGfZnpE5YK9QsHIJBZcIkOdW141d3Gt8EiyjfcaWqRKk6Z84kOc6duODjmzluUZGyz4g6Q18UhltaxHkXbbtIgfsRyvknQt5bobZc6dltP3Gl0SudmW7LUslSJ1mPUbFeWVUepDnDpB3SgazRtW0BXxt+ABfhE7rypyVbCKCTLF9U2QrgjQKg3b7zskGv3eI0+XsuDZ8EJy2YJMtQyVIHfEztldFDtghz728j4LzGphGoZq2gK9ZMDuwiH3ngTJ7OG+VLY8EAeTKc9ts9lwk42zEOi2st+JrYZIA1xYso12Xx4qWV4K8xPZzka3ISCrPDVY1YJ1WtfVYZWW0ctdbPW7LTAnSQHyDJCoykEYhTNdpuUsK6YDZqQ85cG5cw6y3CsWmLYBXG/NayfJMkI8oVR/KG7AfC8k7u4MKVw2kM1r1eB2RpDNXuAauJVhGe6stKyVIBrid7YA4r6o5N5BG4cxOI3mtaeWtymj53LiG4FwmKJs78lzB8k4QVIsN4ryqynN7AzP1ShXIc2tYg3GuSpJO6/aKltHK3KWmhQgCPMm2R+SAfTSkANlzV9Rw2rc6MDcyWtHZaPfYsiElSPaQOYVYiSnxiIprB8kpeGn+v8U2mZD8FjxzTpybKjqtqwQ5Od5g2yGyq4Xsued3UeHSvsW3IlUZLZ8L5xSctmCHLRMliCBgN/AJcV7F6SpbjBe8gUWkUaimLeBzmOUsU2JltOMkcbd+JQiNkYB8ErNVbPe0Nmq72i4kXMiwNUnfe+AcOJfgfCWbbVkoQQTiR2xvivPKynODNX0ULF9AGoVq2gL+Lc4hWEaL2N/XTBWq2Qgic3BYled2+ekeVfOV51az0WKNF59DsIx2XbNVpmYkyPNsuyWSBBJYf+USKsxHnlvNRsu/8WXLaHfb2CtBcoD1Ir2CPJf/wxSt2xmkupGT9c6QtoCPNdO66FfJldGub8aK1KwEeY9tm8gB+2hI3jmdVLii/+RbBdktfHAsfpPIfSm4zcZcCZIjfJftiMQBO1IQQBrrn3qCRYZ20SOOMTLacbHrrRDjW5q1EjUzQbiTTzeIbEUgz+232XNne59RfX+CbLT9omW0iHFFCZJPPMr2W5EDdshzL1tKwfkzrNOqrrfi73CMYBntKzbGpATJL64X6RXWZRVtxlnP+VgaBZO2wEu/wzGatkAJUk+8zLZLZCuCdVoXciux+rhVuXYVMD7Dd7Hc9Va7bGyVIE0Amf3kaXnuIHm9qTwXhr/xmWAZbUXk+E4JsmAcZtsqcsAOee6Z7VS08lwY/sZngmW0W21MlSBNhLvY9onzCqtIxipUuKqf3L6iMfyNz4RO6+6zsWwJ+NRawNvep8S1IhMxucie+8VT0o+6PIqPiB17rG+lCtNqBPkl2wts14gbsCONwqVLzT8Fr7d6wcawZeBS60Hm1GSSTu+a6d5EY6cEyQ5/YLtf4oCd4iQ1ma3H/TZ2SpAWwLfZSqSYK0o2ZqQEaQ1AN32T1vs54yYbMyVIC+GBVuwyLLBL+kCr3rzb4oV/vdZ/jZESZHb8iqS9F5GFp2yMlCAtjCENgcZGCTI79rPdqWH4FO60sVGCKOh7bIc0DNM4ZGNCShAFEFKOsyDVARttTJQgGoJpPMb2Gw2DicFjGgYlyExYpyHQGChBZsfv2B5p4ft/xMZAoQSZFZso3TKo1VC2965QgpwQI2w3t+B932zvXaEEOSnuZtvbQve7196zQgkyZ6zXe1UoQWbH02zPtcB9PmfvVaEEmTeG9B6VIIrZ8RbbvU18f/fae1QoQRYMJKU81oT3dYwkJj1VguQOk9REaY2Pw4323hRKkEVjJ9vrTXQ/r9t7UihBaobr9V6UIIrZ8Wu2J5rgPp6w96JQgtQcG2jmhGl5QWzvQaEEqQsOst2WY/9vs/egUILUtZIN59Dv4ZyTWwmSEyDnUx7luRtJar4qJUjT4RdsL+bI3xetzwolSMOwTn1Vgihmx2tsD+XAz4esrwolSMPxLZK9XGPS+qhQgmSCo2xbBPu3xfqoUIJkhh+yvSPQr3esbwolSOYYUp+UIIrZ8SzbM4L8ecb6pFCC6BNbWw8lSB7wLtt2AX5st74olCDikPWskfRZNSVIi2OKst2+c5P1QaEEEYuH2V7N4Lqv2msrlCDisa5FrqkEUSwIL7E93sDrPW6vqVCC5AaN0l/kVZ+iBGlxfMR2awOuc6u9lkIJkjvcwXagjuc/YK+hUILkEgnVdxeRDfYaCiVIbvEk2546nHePPbdCCZJ7rMvJORVKkEzwBtuOGp5vhz2nQgnSNMBu6uM1OM84Nedu80qQFscY1SYfx2Z7LoUSpOlwH9ubi/j9m/YcCiWIDth1YK4EaUU8z7Z7Ab/bbX+rUII0PdY36DcKJUgu8R7btnkcv83+RqEEaRncwnZkDscdsccqlCAthQrbDXM47gZ7rEIJ0nJ4lO2VE3z/ij1GoQRpWaxb4HcKJUhL4GW2XTN8vst+p1CCtDw+Oc6Y6/hEoQRpCRxm23rcv7fazxRKEIXFXZRuwBDZvxUC4GsIREHflguDkyQqaVYotIulUChBFAoliEKhBFEolCAKhRJEoVCCKBRKEIVCCaJQKJQgCoUSRKFQgigUShCFIhP8vwADACog5YM65zugAAAAAElFTkSuQmCC" alt="logo">

Wir haben oben erwähnt, dass das vue-Projekt schließlich in ein dist-Verzeichnis gepackt wird, was uns also hilft, dieses Paket zu vervollständigen, ja, es ist webpack. Beim Einfügen eines Bildes in das Vue-Projekt werden aufmerksame Schüler feststellen, dass die Adresse des im Browser angezeigten Bildes manchmal eine Base64-Adresse und manchmal eine kompilierte Dateiadresse ist. Das ist der oben beschriebene Unterschied.

Der Grund für diesen Unterschied ist, dass beim Packen von Webpack die Bildressourcen konfiguriert werden. Wir können den folgenden Befehl verwenden, um die Webpack-Konfigurationsdatei im vue-Projekt zur Überprüfung zu generieren:

npx vue-cli-service inspect --mode development >> webpack.config.development.js

Das obige Bild zeigt die standardmäßigen Bildverpackungsregeln von Webpack in Vue. Set type: 'asset', standardmäßig wird für Bilder kleiner als 8k das Bild in base64 konvertiert und direkt in das Bild eingefügt, und es werden keine neuen Bilder im dist-Verzeichnis generiert. Bilder, die größer als 8k sind, werden in das dist-Verzeichnis gepackt und dann wird die Adresse des neuen Bildes an src zurückgegeben.

Das Bild, das ich im obigen Test verwendet habe, ist ein Logobild, das mit vue-cli geliefert wird, und die Größe beträgt 6,69 KB. Gemäß den Standardpaketierungsregeln wird es in base64 konvertiert und in das Bild eingebettet. Der Einfachheit halber habe ich die Standardkonfiguration in vue.config.js geändert. Die Konfiguration lautet wie folgt:

module.exports = {
    // 使用configureWebpack对象，下面可以直接按照webpack中的写法进行编写
    // 编写的内容，最终会被webpack-merge插件合并到webpack.config.js主配置文件中
  configureWebpack: { 
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
             // 这里我将默认的大小限制改成6k。
              // 当图片小于6k时候，使用base64引入图片；大于6k时，打包到dist目录下再进行引入
              maxSize: 1024 * 6
            }
          }
        }
      ]
    }
  }
}

So viel wurde oben schon gesagt, was hat das mit verlangen zu tun, natürlich gibt es einen Tropfen.

Wir wissen jetzt, dass vue letztendlich über das Webpack verpackt wird, und eine Reihe von Paketierungsregeln werden in die Webpack-Konfigurationsdatei geschrieben. Die Verpackungsregeln in webpack zielen eigentlich auf einzelne Module ab, mit anderen Worten, webpack verpackt nur Module. Wie behandelt Webpack also das Bild als Modul?Dies erfordert unsere Hauptanforderung.

Wenn wir die require-Methode verwenden, um ein Image einzufügen, behandelt Webpack das Image als Modul und verpackt es gemäß den Regeln in der Konfigurationsdatei. Wir können require als Brücke verwenden, die von der require-Methode eingeführte Ressource verwenden, die Ressource wird als Modul betrachtet und gemäß der Konfigurationsdatei gepackt, und das endgültige Paketierungsergebnis wird zurückgegeben.

Zurück zu Frage 4.2: Was passiert nach dem Aufruf der require-Methode, um ein Bild einzufügen

1. Wenn das Bild kleiner als die im Projekt festgelegte Ressourcengrenzgröße ist, wird die base64 des Bilds zurückgegeben und in den Aufruf der require-Methode eingefügt

2. Wenn das Bild größer als die im Projekt festgelegte Ressourcengrenzgröße ist, wird es in eine neue Bildressource kompiliert. Die require-Methode gibt den neuen Bildressourcenpfad und Dateinamen zurück

Zurück zu Frage 4: Warum das Hinzufügen von require Ressourcen korrekt einführen kann

Da die durch die require-Methode erhaltene Dateiadresse die Dateiadresse ist, nachdem die Ressourcendatei kompiliert wurde (die unter dist generierte Datei oder die base64-Datei), können Sie die entsprechende Datei finden und die Ressource erfolgreich importieren.

Die Antwort ist so einfach, um eine Welle zu verifizieren

// vue文件中使用require动态的引入一张图片
<template>
  <div class="home">
      <!-- 使用require动态引入图片 -->
      <img :src="require('../assets/logo.png')" alt="logo">
  </div>
</template>


//最终编译的结果
//这张图片是可以被正确打开的
<img src="/img/logo.6c137b82.png" alt="logo">

Gibt es ein Problem, kein Problem. An dieser Stelle können wir auch unsere Standardantwort noch einmal optimieren:

Aufgrund des dynamisch hinzugefügten src stimmt die Adresse der kompilierten Datei nicht mit der Adresse der kompilierten Ressourcendatei überein, sodass Ressourcen nicht korrekt importiert werden können. Und mit require wird die Dateiadresse zurückgegeben, nachdem die Ressourcendatei kompiliert wurde, damit die Ressource korrekt eingeführt werden kann

Angesichts dessen wird geschätzt, dass einige Freunde immer noch Zweifel haben, also werde ich eine weitere Welle erweitern:

5. Warum wird bei Frage 3, statisches Importieren eines Bildes ohne require, immer noch die kompilierte Dateiadresse zurückgegeben?

Antwort: Wenn das Webpack die Vue-Datei kompiliert und auf src und andere Attribute stößt, verwendet es standardmäßig require, um den Ressourcenpfad zu importieren. Zitieren eines Originalsatzes aus dem offiziellen vue-cli

*.vue Wenn Sie mit einem relativen Pfad (muss mit beginnen) in JavaScript, CSS oder files auf eine statische Ressource verweisen . , wird die Ressource in das Abhängigkeitsdiagramm des Webpacks aufgenommen. Während der Kompilierung werden alle Ressourcen-URLs wie <img src="...">, background: url(...) und CSS als Modulabhängigkeit aufgelöst .@import

Zum Beispiel url(./image.png) würde übersetzt werden als require('./image.png'), während:
<img src="./image.png">
wird kompiliert zu:
h('img', { attrs: { src: require('./image.png') }})

6. Laut Frage 5 wird beim dynamischen Hinzufügen von src auch require verwendet, um es zu importieren.Warum stimmt die kompilierte Adresse von src nicht mit der Ressourcenadresse von kompilierten Bildressourcen überein?

Antwort: Denn wenn ein Bild dynamisch importiert wird, ist der Attributwert hinter src eigentlich eine Variable. webpack analysiert den Attributwert nach src gemäß der v-bind-Anweisung. Der Ressourcenpfad wird nicht durch reuqire eingeführt. Aus diesem Grund müssen Sie require manuell hinzufügen.

7. Es wird gesagt, dass öffentlich zugängliche Dateien nicht kompiliert werden. Wenn wir also statische Pfade zum Importieren von Ressourcen verwenden, werden wir dann standardmäßig auch require to import verwenden?

Der offizielle Text lautet wie folgt:

Alle public im Ordner abgelegten statischen Ressourcen werden einfach kopiert, ohne das Webpack zu durchlaufen. Sie müssen mit dem absoluten Pfad darauf verweisen.

Antwort: Nein, die Voraussetzung für die Verwendung von require zum Importieren von Ressourcen ist, dass die Ressource ein Modul ist, das von Webpack analysiert wird, und die Dateien unter public überhaupt nicht kompiliert werden und require nicht verwendet wird.

8. Warum muss der absolute Pfad für Ressourcen unter der Öffentlichkeit verwendet werden?

Antwort: Denn obwohl öffentliche Dateien nicht kompiliert werden, werden Dateien unter src kompiliert. Da es sich bei den importierten Ressourcen um öffentliche Ressourcen handelt, wird require nicht verwendet und die im Code definierte Dateiadresse wird direkt zurückgegeben.Diese Adresse kann die entsprechende Datei im kompilierten Dateiverzeichnis (dist-Verzeichnis) nicht finden, was zu einem Fehler führt Ressourcen importieren.

9. Das im obigen Dokument erwähnte Webpack, warum gibt es zwei Möglichkeiten, Ressourcen zu importieren, base64 und Paketierung in das dist-Verzeichnis, alles in das dist-Verzeichnis gepackt, ist es nicht köstlich?

Antwort: Um HTTP-Anfragen zu reduzieren. Das durch den Pfad in die Seite eingeführte Bild sendet tatsächlich eine Anfrage an den Server, um das Bild zu erhalten. Legen Sie für Dateien mit kleinen Ressourcen base64 fest, wodurch Anforderungen reduziert werden können und die Ladeleistung der Seite nicht beeinträchtigt wird.

Referenzlink: cli.vuejs.org/zh/
Referenzlink: wjhsh.net/vickylinj-p-15599154.html

Autor: Wie kann man in diesem Alter noch schlafen

https://juejin.cn/post/7159921545144434718