Блог

Главная - Вопросы по программированию - Локальные изображения не загружаются в Vue.js

Локальные изображения не загружаются в Vue.js

#vue.js #vuejs2 #vue-component #vue-router

#vue.js #vuejs2 #vue-компонент #vue-маршрутизатор

Вопрос:

У меня есть новый vue сайт, который был создан с использованием vue-cli , но мое изображение вообще не загружается и не может понять, почему

  <router-link class="logo" to="/" tag="img" src="@/assets/logo.png" style="cursor: pointer"/>

У меня есть image сохраненные в assets папке

введите описание изображения здесь

введите описание изображения здесь

консоль

введите описание изображения здесь

введите описание изображения здесь

Но если я использую приведенное ниже, оно отображается

 <img src="@/assets/logo.png" />

введите описание изображения здесь

консоль

введите описание изображения здесь

Ответ №1:

В vue cli изображения рассматриваются как модули, поэтому их следует импортировать или запрашивать :

  <router-link :src="require(@/assets/logo.png)" style="cursor: pointer" class="logo" to="/" tag="img" />

Ответ №2:

Насколько я вижу, <router-link> у него нет src поддержки: https://router.vuejs.org/api/#router-link-props

Комментарии:

1.Отображается router-link как HTML img , поэтому src допустимо

2. в соответствии с этим : иногда мы хотим, чтобы <router-link> отображался как другой тег, например <li> . Затем мы можем использовать tag prop, чтобы указать, какой тег отображать, и он все равно будет прослушивать события щелчка для навигации

3. Важно, что router-link у него нет src prop: поскольку он сам не знает о src prop, он будет передавать значение как есть. Это не похоже на то, что Vue просматривает все атрибуты везде, чтобы увидеть, похожи ли они на пути, которые следует переписать.

Ответ №3:

Когда вы используете Vue с Webpack (почти всегда), Vue-loader используется для компиляции ваших .vue файлов. При компиляции <template> части файла он ищет некоторые общие теги, такие как <img> и способен преобразовывать содержимое src тегов в запросы модуля Webpack

Таким образом, ваш <img src="@/assets/logo.png" /> во время компиляции преобразуется (по сути) в <img :src="require('@/assets/logo.png')" />

Смотрите ссылку выше для получения комбинаций тегов / атрибутов, преобразованных по умолчанию. Если нужной вам комбинации там нет (как в вашем случае), вы можете либо настроить Vue-loader (transformAssetUrls), как это делают многие популярные библиотеки пользовательского интерфейса (например, Vuetify для его v-img компонента), либо вы должны сделать это вручную, как предложил @Boussadjra Brahim (с пропущенными кавычками):

 <router-link :src="require('@/assets/logo.png')" to="/" tag="img" />