0

Делаю проект на nuxt, для ui использую vuetify. Решил использовать имеющиеся v-img. При инспекции генерируемого сервером кода увидел что не генерируется тег img(если смотреть через page source), если смотреть через консоль уже на открытом сайте, данный тег генерируется корректно. Как быть с v-img и ssr? Кто нибудь сталкивался с такой проблемой?

<v-img
            :src="product.image"
            lazy-src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw=="
            aspect-ratio="1"
            class="grey lighten-2"
            max-width="500"
            max-height="300"
        >
            <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                    <v-progress-circular
                        indeterminate
                        color="grey lighten-5"
                    ></v-progress-circular>
                </v-row>
            </template>
        </v-img>

1 ответ 1

1

Оберните вашу картинку в функцию require(). Пример: :src="require(product.image)"

Второй вариант это обернуть v-img в no-ssr тэг.

Третий вариант это использовать папку static для хранения картинок, если вы используете картинки локально.

-static
--img

Пример пути: src="img/product-image.jpg"

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.