Nuxt. js + vuetify image not loading

Question

Я использую Nuxt. js + Vuetify, но изображения не могут загружаться в файлы моей следующей страницы. Например, в моем ./pages/browse/index.vue у меня есть тег vuetify image, подобный следующему:

<v-img
  src="~/assets/img/test.png"
  style="width:300px"
  contain
></v-img>

Изображение находится в assets/img/test.png, однако всякий раз, когда я запускаю свой сервер Nuxt, изображение не будет ниже показан скопированный элемент div из Chrome dev tool:

<div class="v-image__image v-image__image--contain" style="background-image: url(&quot;http://localhost:3333/browse/~/assets/img/test.png&quot;); background-position: center center;"></div>

Изображение работает, только если я не использую компонент изображения Vuetify, например:

<img
  src="~/assets/img/test.png"
  style="width:300px"
/>

Answer 1

Попробуйте добавить изображения в папку static. Папка assets предназначена для файлов css / sass / s css, которые необходимо проанализировать в веб-пакете. Да, вы можете добавить небольшие изображения в assets, которые затем будут преобразованы в base64, когда веб-пакет проанализирует их. Но эти изображения затем могут быть загружены в приложение с использованием только тега <img />, а не через <v-img /> компонент vuetify.

Насколько я понимаю, <img /> может принять строку base64, а затем загрузить соответствующую изображение, но в <v-img /> его ожидаемый src будет URL-адресом изображения. Когда вы даете base64, boom, он ничего не загружает!

<v-img src="img/test.png"/>

Answer 2

Вы используете Nuxt 2.0? Если это так, обратите внимание на предупреждение в их разделе веб-пакета:

Предупреждение. Начиная с Nuxt 2.0, псевдоним ~ / не будет корректно разрешен в ваших CSS файлах. Вы должны использовать ~ assets (без sla sh) или псевдоним @ в ссылках url CSS, т.е. background: url ("~ assets / banner.svg")

Answer 3

Вы можете обернуть тег v-img внутри тега no-ssr, что-то вроде этого.

<no-ssr>
  <v-img
    src="~/assets/img/test.png"
    style="width:300px"
    contain
  ></v-img>
</no-ssr>

Если это не сработает, вы можете попробовать это

<v-img
    :src="require('@/assets/img/test.jpg')"
    style="width:300px"
    contain
  ></v-img>