Error in Vue component when setting the background image URL

Question

Here is my code snippet that sets the background image for a component:

style() {
  return {
    "background-image": `url(${require(`../../../assets/images/${this
      .last_result}.png`)})`
  };
},

The expected URL should be

../../../assets/images/AR.png

However, I am encountering an error where the console is showing a modified URL:

/assets/images/AR0.2514806280000456da85c5fNaNpng

I am unable to identify the issue here. Can someone provide assistance?

Answer 1

Answer №1

Follow these steps to utilize it.

style() {
  return {
    "background-image": `url(${require(`@/assets/images/${this
      .last_result}.png`)})`
  };
},

Experiment with absolute path usage.

Your absolute path should be @/assets/images/ if your assets folder is located in src/assets/images/.

If you prefer using relative paths, refer to the path ../../../assets/images/ from your current component.

This information proves beneficial.

Answer 2

Follow these steps to utilize it.

style() {
  return {
    "background-image": `url(${require(`@/assets/images/${this
      .last_result}.png`)})`
  };
},

Experiment with absolute path usage.

Your absolute path should be @/assets/images/ if your assets folder is located in src/assets/images/.

If you prefer using relative paths, refer to the path ../../../assets/images/ from your current component.

This information proves beneficial.