Vue cli 3 project ,dynamic src in image path not working

Question

I am referencing an image url in a vue component like

<img alt="Vue logo" src="~statics/reports/logo.png">

this works

but while trying

<img alt="Vue logo" :src="getURL()">


data() {
    return { imgPath: "~statics/reports/logo.png" };
  },

  methods: {

    getURL() {
        // 

      // console.log(path)
      return (this.imgPath)
    }
  },

it fails

My folder structure is

In the first case the path is resolved to

http://localhost:8081/img/logo.82b9c7a5.png

and served automatically by the dev server

The path is not resolved in the second case it remains http://localhost:8081/~statics/reports/logo.png

I am using vue cli 3 generated default config for webpack .

I do not want to use relative paths for all images like ../images/ as it makes it more verbose. I have tried require(pathVariable) that too does not work Please help with resolving the img path when the url is dynamic ie asset name comes from server and i append a path in a method or computed and use :src dynamicbinding to serve it

achwilko · Accepted Answer · 2019-02-01 14:32:06Z

29

The second way fails because "~" try to get this asset from node_modules. You can read more about handling assets here: https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports.

To fix it just use require like below:

data() {
  return {
    imgPath: require('@/statics/logo.png')
  }
}

..or directly in template:

<img alt="Vue logo" :src="require('@/statics/logo.png')">

edited Feb 1, 2019 at 14:32

answered Feb 1, 2019 at 14:22

achwilko

8046 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fred Over a year ago

I get Uncaught (in promise) ReferenceError: require is not defined. Do I need to configure something first in order to make this work?

Piyush Singhania Over a year ago

If you are using Vite then require won't work @Fred

Fred Over a year ago

Ah, I got confused about Vue 3 and vue-cli 3 (which creates Vue 2 code) again. Thanks for the heads up!

Abeyance · Accepted Answer · 2020-11-02 19:38:12Z

0

For Vue 3 projects you can use the following:

<img src="./assets/logo.png" />

answered Nov 2, 2020 at 19:38

Abeyance

1531 gold badge2 silver badges7 bronze badges

2 Comments

Dvdgld Over a year ago

it's relative path. It doesn't answer the question.

João Melo Over a year ago

it didn't work for me in an computed property. i needed to move it to the data function.

Collectives™ on Stack Overflow

Vue cli 3 project ,dynamic src in image path not working

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related