Utilize generated styling data bindings when referencing assets

Question

Utilize generated styling data bindings when referencing assets

Currently, I am working with vue-cli 3 and trying to create background-image paths. To achieve this, I am utilizing the style data bind within a v-for-loop.

Below is the component structure:

<template>
    <ul>
      <li v-for="(tool, index) in tools" :key="index">
        <a href="#" :style="{ backgroundImage: 'url(@/assets/icons/' + tool + '.svg)' }"></a>
      </li>
    </ul>
</template>

<script>
export default {
  props: {
    tools: Array,
  }
}
</script>

The images can be found in the following directory: src/assets/icons/xxx.svg

Despite my efforts, the generated image path seems to be incorrect. I have reviewed the code but am unable to identify the mistake.

css webpack vue.js assets

Answer 1

Answer №1

Webpack doesn't parse any paths inside the HTML because it's not that intelligent yet.

However, you can outsmart webpack by getting the URL using a little trick. While this may not be the most elegant solution, it does solve your problem. Simply create a computed property to generate a new list containing all the tools along with their image paths. The key is to allow webpack to handle the URL path for you within that object and then refer to it in your HTML code.

Please note: I am assuming that each item in the tools array is a unique string.

<template>
    <ul>
      <li v-for="tool in items" :key="tool.name">
        <a href="#" :style="{ backgroundImage: `url(${tool.img})` }"></a>
      </li>
    </ul>
</template>

<script>
export default {
  props: {
    tools: Array,
  },
  computed: {
    items () {
      return this.tools.map(tool => {
        return {
          name: tool,
          // Let webpack handle the file path for you
          img: require(`@/assets/icons/${tool}.svg`)
        }
      })
    }
  }
}
</script>

Answer 2

Webpack doesn't parse any paths inside the HTML because it's not that intelligent yet.

However, you can outsmart webpack by getting the URL using a little trick. While this may not be the most elegant solution, it does solve your problem. Simply create a computed property to generate a new list containing all the tools along with their image paths. The key is to allow webpack to handle the URL path for you within that object and then refer to it in your HTML code.

Please note: I am assuming that each item in the tools array is a unique string.

<template>
    <ul>
      <li v-for="tool in items" :key="tool.name">
        <a href="#" :style="{ backgroundImage: `url(${tool.img})` }"></a>
      </li>
    </ul>
</template>

<script>
export default {
  props: {
    tools: Array,
  },
  computed: {
    items () {
      return this.tools.map(tool => {
        return {
          name: tool,
          // Let webpack handle the file path for you
          img: require(`@/assets/icons/${tool}.svg`)
        }
      })
    }
  }
}
</script>

Utilize generated styling data bindings when referencing assets

Answer №1

Similar questions

Is there a way to dynamically adjust @keyframes properties through JavaScript?

Creating a full-width input field with text aligned to the right:

Use a boolean value to determine the styling of multiple items simultaneously

Tips for ensuring that the click event function properly for numerous elements sharing the same class

Is it possible to pass slot data back to the parent component in Vue in order to propagate a prop down?

Ways to center elements horizontally without relying on Flexbox layout?

What's the reason behind repeatedly running the "webpack" command?

The functionality of Slick.js is compromised when the v-for directive is refreshed

What could be the reason for the compatibility issues between CSS/SASS modules and a third-party library?

I am experiencing issues with local storage getItem() function not functioning properly within NUXT JS

I am experiencing issues with a few of my design choices not functioning correctly

Implementing type-based validations in Vue.js 3 using Yup

Images are not being shown by Glide JS

What is the best way to extract the numerical value from a JavaScript object?

Vuex - Issue with module state causing undefined return value

Chaos in the IE8 drop-down menu situation

How to position one div next to another using CSS and HTML

adding content to div is becoming less speedy

Designing divs of the same dimensions with a wrap-around effect

div positioned on top of additional div elements