Как загрузить изображение Dynami c из папки ресурсов в NuxtJS - PullRequest
Новая
       83

Как загрузить изображение Dynami c из папки ресурсов в NuxtJS

0 голосов
/ 18 июня 2020

У меня 2 проблемы:

  1. Если я использую переменную в sr c:

, я получу эту ссылку в web, а не совсем: 

http://localhost:3000/~/assets/product/image/bg.png

Аналогично первой задаче. Я хочу использовать динамический c css файл в методе head ():

экспорт по умолчанию {head () {const style = this. $ Cook ie .get ('app_style') return { ссылка: [{rel: 'stylesheet', href: ~/assets/${style}.css}]}}}

1 Ответ

0 голосов
/ 18 июня 2020

Чтобы загрузить динамические c изображения в папку ресурсов, вы можете использовать require, чтобы указать webpack, какое изображение загружать таким образом. В вашем шаблоне вы можете сделать: 

<img :src="require(`../assets/img/${folderType}/bg1.png`)" />

Примечание: предполагая, что folderType определено в вашем разделе скрипта

, вы можете извлечь оператор require в вычисляемое свойство (сделает ваш шаблон более чистым ). Вот так: 

export default {
  // ...
 data() {
  return {
   folderType: 'folderTypeGoesHere'
}
},
  computed: {
    imagePath () {
      return require(`../assets/img/${this.folderType}/bg1.png`) // the module request
    }
  }
}

Тогда в вашем шаблоне просто используйте: 

<img :src="imagePath" />

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

...