Nuxt Dynami c ресурс не загружается - PullRequest
Новая
       4

Nuxt Dynami c ресурс не загружается

0 голосов
/ 06 марта 2020

Я пытаюсь загрузить динамические c активы в nuxt. Я следовал всем советам, говоря, что нужно использовать require, но я не могу заставить его работать.

С этим в моем шаблоне 

<v-img  :src="mimeTypeUrl()"></v-img>

следующие результаты в Error: "Cannot find module '~/assets/media/application-vnd-google-earth-kmz.png'" 

methods: {
    mimeTypeUrl() {
      const f = '~/assets/media/application-vnd-google-earth-kmz.png';
      return require(f);
    }
  }

но это прекрасно работает: 

methods: {
    mimeTypeUrl() {
      return require('~/assets/media/application-vnd-google-earth-kmz.png');
    }
  }

В чем здесь проблема и как ее решить?

@nuxt/core version: 2.11.0

webpack version: 4.41.6

Ответы [ 2 ]

0 голосов
/ 07 марта 2020

Хотя уродливое решение, которое я нашел, это создать объект с именами значков в качестве ключей и require() в качестве значений: 

const MIME_ICONS_REQUIRE = {
  ...
  'application-msword':require('~/assets/media/mimetypes/application-msword.png'),
  'application-pdf':require('~/assets/media/mimetypes/application-pdf.png'),
  'application-vnd-google-earth-kml':require('~/assets/media/mimetypes/application-vnd-google-earth-kml.png'),
  ...
}
0 голосов
/ 06 марта 2020

Это всегда сложная ситуация. В вашем случае вы можете решить эту проблему, наложив псевдоним f на имя иконки и используя его на месте, конкатенируя по пути: 

mimeTypeUrl(icon) {
  return require(`~/assets/media/${icon}`);
}

И затем вызывая его с иконкой в ​​качестве аргумента. : 

:src="mimeTypeUrl('application-vnd-google-earth-kmz.png')"

Это работает, потому что веб-пакет создаст весь контекст для вашего каталога /assets/media, который будет содержать ваш файл изображения.

Не рекомендуется

Вы можете реально обмануть веб-пакет, создав контекст для всего вашего проекта, добавив в свой путь пустую строку 

mimeTypeUrl(icon) {
  return require('' + '~/assets/media/application-vnd-google-earth-kmz.png');
}

Это нежелательно, поскольку это создаст контекст для всей структуры приложения. что увеличит размер пучка на измеримую величину. Это может также привести к непреднамеренным последствиям, вызывая загрязнение глобального контекста и приводя к тому, что псевдонимы разрешаются некорректно, если в именовании файлов и / или классов возникает коллизия.

...