vue.js - Vue & Typescript: Resim içe aktarma bulunamadı

Problem

Şu anda Typescript kullanarak bir Vue projesi üzerinde çalışıyorum. Assets klasörümün içinde, ayrı bir Typescript dosyasıyla ithal etmek istediğim bazı resimlerim var.

Arka plan

Bu proje, Typescript kullanılarak vue-cli tarafından başlatıldı, sürüm 3.2.1. Denediğim şey, dosyama doğrudan require kullanarak import etmeydi, bu işe yaramadı. Daha sonra import kullanarak import etmeyi denedim, ancak sonuç alamadım.

Kod

İşte denediklerim:

./src/myFile.ts
import Image from '@/assets/img/hello.png';

Çalışmıyor

./src/myFile.ts
import Image from '../assets/img/hello.png';

Çalışmıyor

./src/myFile.ts
const Image = require('../assets/img/hello.png');

Çalışmıyor

Sonuç

Paketleyici, dosyanın yolu ile birlikte Relative modules were not found benzeri bir hata verecektir. Yolun doğru olduğundan emin oldum ve bunun TypeScript'in importları yönetme şekli ve Vue-cli'nin dosyalarımı paketlemek için nasıl yapılandırıldığı ile ilgili olduğunu düşünüyorum.

Ekran görüntüsü

İşte gerçek projenin bir ekran görüntüsü. Dosya yolu ./src/views/World/Combat/Game.ts:

Cevap #1

/src/ içinde shims-png.d.ts adlı bir dosya oluşturun ve bu içeriğe sahip olun:

declare module "*.png" {
  const value: string;
  export default value;
}

Durdurun ve uygulamayı tekrar çalıştırın.

İlgili makaleler