Heim  >  Artikel  >  Web-Frontend  >  Wie erfordert die Verwendung von Vue3+TypeScript+Vite die dynamische Einführung statischer Ressourcen wie Bilder?

Wie erfordert die Verwendung von Vue3+TypeScript+Vite die dynamische Einführung statischer Ressourcen wie Bilder?

王林
王林nach vorne
2023-05-16 20:40:382642Durchsuche

Frage : Wie verwende ich require, um statische Ressourcen wie Bilder dynamisch in ein Vue3+TypeScript+Vite-Projekt einzuführen?

Beschreibung : Heute müssen wir bei der Entwicklung eines Projekts (das Projektgerüst ist Vue3+TypeScript+Vite) tun Statische Ressourcen dynamisch einführen , das heißt, der src-Attributwert des img-Tags wird dynamisch abgerufen. Gemäß der bisherigen Praxis kann er direkt durch require eingeführt werden, wie im folgenden Code gezeigt:

<img  class="demo" :src="require(`../../../assets/image/${item.img}`)" / alt="Wie erfordert die Verwendung von Vue3+TypeScript+Vite die dynamische Einführung statischer Ressourcen wie Bilder?" >

Nach dem Schreiben des Codes meldet die Wellenlinie einen Fehler und die Fehlermeldung wird gemeldet:

Name „require“ nicht gefunden. Müssen Sie Typdefinitionen für den Knoten installieren? Versuchen Sie es mit npm i --save-dev @types/node. ts(2580)npm i --save-dev @types/node。ts(2580)

在进行了npm i --save-dev @types/node 安装以及在TypeScript的配置文件 tsconfig.json中添加了配置项 "type":["node"] 后波浪线提示消失,但 浏览器的控制台依然报错,错误提示如下:

Wie erfordert die Verwendung von Vue3+TypeScript+Vite die dynamische Einführung statischer Ressourcen wie Bilder?

解决

先说结论吧,在vite中不能使用require引入图片资源因为这里的require貌似是webpack提供的一种加载能力,由于我们并非使用的webpack作为项目的构建工具,我们使用的是Vite,因此这里必须转用 Vite提供的静态资源载入,vite关于这一部分的官方说明在这里,有兴趣的小伙伴可以看官方的文档:Vite中静态资源处理;

Wie erfordert die Verwendung von Vue3+TypeScript+Vite die dynamische Einführung statischer Ressourcen wie Bilder?

这里我们在提炼的说明一下,官网上示例的用法如下:

const imgUrl = new URL(&#39;./img.png&#39;, import.meta.url).href
document.getElementById(&#39;hero-img&#39;).src = imgUrl

可能不大好理解,简单的说 new URL 一共接收两个参数,第一个参数即图片的路径,这里就是对应require中的值,第二个参数是vite的一个全局变量,可以理解成直接写死了 import.meta.url,放到项目中大致如下:

<img  class="t-desktop-icon" :src="getIcon(name)" / alt="Wie erfordert die Verwendung von Vue3+TypeScript+Vite die dynamische Einführung statischer Ressourcen wie Bilder?" >

template

Nach der Installation von npm i --save-dev @types/node und der TypeScript-Konfigurationsdatei Nach dem Hinzufügen der Konfigurationselement "type":["node"] zu >tsconfig.json, die Wellenlinienaufforderung verschwindet, aber

die Browserkonsole meldet immer noch einen Fehler#🎜🎜 # , die Fehlermeldung lautet wie folgt: #🎜🎜##🎜🎜#Vue3+ TypeScript+ Wie verwendet Vite „require“, um statische Ressourcen wie Bilder dynamisch einzuführen? Sie können „require“ nicht verwenden, um Bildressourcen #🎜🎜#, #🎜🎜# einzuführen, da „require“ hier eine vom Webpack bereitgestellte Ladefunktion zu sein scheint #🎜🎜#. Da wir kein Webpack als Konstruktionstool des Projekts verwenden, verwenden wir Vite. Daher müssen Sie hier zum statischen Laden von Ressourcen wechseln, das von #🎜🎜#Vite#🎜🎜# bereitgestellt wird. Die offiziellen Anweisungen von Vite zu diesem Teil finden Sie hier. Interessierte Freunde können die offizielle Dokumentation lesen: Statische Ressourcenverarbeitung in Vite; #🎜🎜##🎜🎜#Hier verfeinern wir die Erklärung. Die Verwendung des Beispiels auf der offiziellen Website ist wie folgt : #🎜🎜#
function getIcon(name: string) {
    return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href;
}
#🎜🎜#Es ist möglicherweise nicht leicht zu verstehen, sagen Sie einfach, dass neue URL insgesamt zwei Parameter erhält, #🎜🎜#Der erste Parameter ist der Pfad des Bildes # 🎜🎜#, hier ist der entsprechende Wert erfordern, der zweite Parameter ist eine globale Variable von Vite, was verständlich ist import.meta.url wird direkt in das Projekt geschrieben und sieht ungefähr wie folgt aus: # 🎜🎜#rrreee#🎜🎜# wird dynamisch auf dem IMG von template getIcon eingeführt. Die Methode ist wie folgt#🎜🎜#rrreee#🎜🎜#Auf diese Weise können Sie statische Ressourcen wie Bilder dynamisch einführen in Vue3+TypeScript+Vite#🎜🎜#

Das obige ist der detaillierte Inhalt vonWie erfordert die Verwendung von Vue3+TypeScript+Vite die dynamische Einführung statischer Ressourcen wie Bilder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:yisu.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen