Clever Geek Handbook

Vuejs 2 Image Src Attributes

Vuejs helpers help!

I have this image loop with an image source. Here is the code.

  <img :src="'../../'+ photo.path" alt="product" height="207" width="175" v-for="photo in product.photos" v-if="photo.is_primary === 1">

I have to replace this prefix with the base url for reuse.

../../

How? TY

+3


source to share


2 answers


When you do: src = "value" it gets value from computed / data, so just create url in computed properties

yourUrl (){
    //build your url here, can be base url or whatever
    return url
}

//html
:src="yourUrl"


It should be.

+3


source


If I understand correctly, you want to add a base url that you will use in multiple components and you don't want to change it in each one?

You can create config.js or whatever you want to be named in your src folder or wherever you like and add

export const baseUrl = 'my/img/base'


Then in whichever component you want to add this baseUrl,

import { baseUrl } from '@/src/config'

data () {
  return {
    baseUrl: baseUrl 
    ...
  }
}

Change the path to your config location.

+1


source






More articles:


All Articles