# Using Prismic Helper "asImageSrc" in Nuxt2 Vue2

**URL:** <https://community.prismic.io/t/using-prismic-helper-asimagesrc-in-nuxt2-vue2/12481>\
**Category:** Developing with Prismic\
**Tags:** vuejs, nuxtjs\
**Created:** [February 21, 2023, 10:22am UTC](https://community.prismic.io/t/using-prismic-helper-asimagesrc-in-nuxt2-vue2/12481 "2023-02-21T10:22:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ricou](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ricou/32/4224_2.png) [@ricou](https://community.prismic.io/u/ricou)\
**Post date:** [February 21, 2023, 10:22am UTC](https://community.prismic.io/t/using-prismic-helper-asimagesrc-in-nuxt2-vue2/12481/1 "2023-02-21T10:22:15Z")

</div>

Hi,  
I wan't to disable the compression of the Prismic Images in my Vue Component.  
So I found in the Prismic documentation that :

```auto
prismicH.asImageSrc(document.data.example_image, { auto: undefined })
// https://images.prismic.io/repo/image.png

```

So I did :

```auto
<template>
  <v-container
    fluid
    class="imageBackground"
    :style="{
      backgroundImage:
        'url(' +
        prismicH.asImageSrc(slice.primary.imagefond.url, { auto: undefined }) +
        ')',
    }"
  >
    <div class="text-center">
      ...
    </div>
  </v-container>
</template>

<script>
import * as prismicH from '@prismicio/helpers'

export default {
  name: 'HomeBlocASlice',
...

```

And I have this error :

**TypeError  
Cannot read properties of undefined (reading 'asImageSrc')**

Can anyone help me ?

---

<div class="post-metadata">

**Author:** ![Priyanka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/priyanka/32/3223_2.png) [@Priyanka](https://community.prismic.io/u/Priyanka)\
**Post date:** [February 21, 2023, 11:43am UTC](https://community.prismic.io/t/using-prismic-helper-asimagesrc-in-nuxt2-vue2/12481/3 "2023-02-21T11:43:23Z")

</div>

Hello @ricou

Thanks for reaching out to us.

The `asImageSrc` [helper](https://prismic.io/docs/technical-reference/prismicio-helpers#asimagesrc) is meant to extract the `src` value of a [Prismic image field](https://prismic.io/docs/image), and, optionally, to apply transformations to it by leveraging features from imgix CDN.  
So it should be without url. Are you able to access prismicH inside backgroundImage. Did you print console?

Best,  
Priyanka

---

<div class="post-metadata">

**Author:** ![ricou](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ricou/32/4224_2.png) [@ricou](https://community.prismic.io/u/ricou)\
**Post date:** [February 21, 2023, 1:46pm UTC](https://community.prismic.io/t/using-prismic-helper-asimagesrc-in-nuxt2-vue2/12481/4 "2023-02-21T13:46:43Z")

</div>

> [@Priyanka](#):
>
> The `asImageSrc` [helper](https://prismic.io/docs/technical-reference/prismicio-helpers#asimagesrc) is meant to extract the `src` value of a [Prismic image field](https://prismic.io/docs/image), and, optionally, to apply transformations to it by leveraging features from imgix CDN.  
> So it should be without url. Are you able to access prismicH inside backgroundImage. Did you print console?
> 
> Best,  
> Priyanka

Thank you @Priyanka  
I hadn't paid attention  
The easyest way is to replace the string in the url like that

```
imageNonCompressee(url) {
  return url.replace('?auto=compress,format', '')
},

```