How to add base url before image path in vue?-CodePudding

There are several images in my database. Some image path are set with base url and some are not. The images which are set without base url are not coming in my frontend. I want to set base url to images which do not contain base url. For example, if a image path is like this - /thumbnail/subjects/ban2b_9.png

I want to add base url before /thumbnail.

And dont want to affect images that already contain base url.

How to do this with javascript in vue ?

Code:

<div >
          <div  v-for="(subjects,index) in subjectData" :key="index">
            <div  >
              <a href="javascript:void(0)" >
                  <img :src="subjects.avatar" >
              </a>
            </div>
          </div>
        </div>

CodePudding user response：

i try to resolve this.

you just need to write a single function in method

getImage(url){
  // let baseurl = 'baseurl';
  if (url.match(this.baseUrl)) {
    return url;
  } else {
    return this.baseUrl   url;
  }
}

or modify in html

:src="getImage(subjects.avatar)"

here a working code on codepan

https://codepen.io/imnoorfahad/pen/JjMMRww

CodePudding user response：

Write the path of the image where you are storing the images and then call the image at the end like ../storage/product/{product.image}

CodePudding user response：

Use this: Here base URL comes from the different file where you provide the database URL. And for dynamic image use this $ inside ``. So, this is how you can provide a dynamic image from database in src in Vue.js

 <img
            :src="`${this.base_url}/static/${this.image}`"
            :style="{ width: 'auto', height: 'auto' }"
            
          />