vue.js vuetify test-utils warning: Vue warn]: Invalid prop: type check failed for prop src. Ожидаемая строка, получен объект

Использование v-parallax vuetify с опорой для отображения URL-адреса ресурса (это рекомендуемый прием ..)

 <v-parallax :src="parallaxUrl()">

 methods: {
    parallaxUrl() {
      return require("@/assets/images/hero.jpeg");
    },

Я получаю изображение, отображаемое правильно, НО выполняю test: unit, я также получаю предупреждение, поскольку для v-параллакса требуется строка, а не объект ... Тест прошел правильно (это только предупреждение ..), однако есть способ избавиться от этого предупреждения?

спасибо за отзыв


unit-testing vue.js vuetify.js vue-test-utils
person Community    schedule 25.08.2018    source источник

Ответы (1)


arrow_upward
-2
arrow_downward

Когда вам нужен файл, он возвращает содержимое данных этого файла. Для изображений он возвращает объект Blob. И поскольку определение src prop в v-parallax гласит, что значение src должно быть строкой (путем к изображению), Vue выдаст это предупреждающее сообщение.

Чтобы удалить предупреждающее сообщение, вы можете обновить определение src в v-parallax, чтобы оно принимало как объект, так и строку.

props: {
  src: [String, Object]
}

ИЛИ

Вы можете вернуть путь к изображению вместо возврата данных внутри изображения.

<v-parallax :src="parallaxUrl()">

methods: {
  parallaxUrl() {
    return "./assets/images/hero.jpeg"
  },
}

https://vuejs.org/v2/guide/components-props.html#Prop-Types
https://webpack.js.org/guides/asset-management/

person David Lartey    schedule 25.08.2018
comment
Большое спасибо ... Я обнаружил, что могу также переместить изображение в общую папку и использовать напрямую: ‹v-parallax src = hero.jpeg› - person ; 25.08.2018