Vue.js组件中从目录获取文件及图片渲染问题咨询

Let’s work through why your background image isn’t showing up and fix it with reliable, Vue-friendly approaches:

First, the core issue: When you use a plain url() in inline styles, webpack (which powers most Vue projects) doesn’t automatically parse that path. This leads to broken URLs after your project is built and deployed. Here’s how to fix it:

Solution 1: Use require() with Dynamic Style Binding #

Wrap your image path in require() and bind it dynamically to the style property. This tells webpack to process the image asset, copy it to your build directory, and generate the correct final URL:

<template>
  <div :style="{ backgroundImage: `url(${require('../../assets/img/bkgds/cheesecloth-herbs-bk.jpg')})` }">
    <!-- Your component content here -->
  </div>
</template>

Solution 2: Use the public Directory (Vue CLI 3+) #

If you’re using Vue CLI, assets in the public folder are copied directly to your build’s root without webpack processing. You can reference them with an absolute path relative to your site’s root:

1. Move your image to public/assets/img/bkgds/cheesecloth-herbs-bk.jpg
2. Update your component code:

<template>
  <div style="background-image: url('/assets/img/bkgds/cheesecloth-herbs-bk.jpg');">
    <!-- Your component content here -->
  </div>
</template>

Solution 3: Import the Image in the Script Section #

Import the image as a module in your component’s script, then reference the imported variable in your style binding:

<script>
import backgroundImage from '../../assets/img/bkgds/cheesecloth-herbs-bk.jpg'

export default {
  data() {
    return {
      bgImage: backgroundImage
    }
  }
}
</script>

<template>
  <div :style="{ backgroundImage: `url(${bgImage})` }">
    <!-- Your component content here -->
  </div>
</template>

Quick Path Validation #

Your original relative path ../../assets/... is actually correct:

• Home.vue lives in src/components/
• ../../ navigates from components/ → src/ → your project root
• From there, assets/img/bkgds/cheesecloth-herbs-bk.jpg points directly to your image—you just needed to make webpack recognize and process the path.

内容的提问来源于stack exchange，提问作者Mohamed Adel