CODEWITHSUNDEEP
vue.jswebpackvuejs2
Rbex
Rbex

Reputation: 1539

Vuejs 2 Image Src Attributes

Vuejs likers help!

I have this image loop with 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 should replace this prefix to base url to be reusable.

../../

How? TY

Upvotes: 4

Views: 9889

Answers (3)

andreas
andreas

Reputation: 16936

You can tell Webpack to handle this as a dependency by using require():

<img :src="require('../../' + photo.path)" alt="..." />

This will make the path relative to the build files instead of relative to the component file.

Upvotes: 2

savagemechanic
savagemechanic

Reputation: 44

If I understand correctly you want to add a base URL that you'll use in multiple components and you don't want to have to change it in each?

You can create a config.js or whatever you want to name it, in your src folder or wherever and add 

export const baseUrl = 'my/img/base'

Then in whichever component you want to append that baseUrl, 

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

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

Change the path to the location of your config.

Upvotes: 0

Luna
Luna

Reputation: 1178

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

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

//html
:src="yourUrl"

That should be it.

Upvotes: 3

Related Questions