Question

我有一个将图片网址作为参数的组件。在我的组件中，我将此URL用作图像路径

<img :src="imgUrl" />

我使用消耗该成分

<MyComponent imgUrl="@/assets/images/logo.png" />

传递此参数时，找不到图像文件。我尝试了多种方法并提供了示例

https://codesandbox.io/s/6zmj1q5ypr

需要解决什么？

我不知道这是否重要，但是我使用Vue CLI创建了我的应用程序，所以我使用了webpack

Answer 1

尝试在脚本中导入并将其设置为data属性，然后将data属性作为imgUrl传递。

<template>
  <div id="app">
    <my-component :imgUrl="image" />
    <router-view />
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'
import image from '@/assets/logo.png'

export default {
  name: 'App',
  components: {
    MyComponent
  },
  data() {
    return { image }
  }
}
</script>

您需要将其绑定到属性，因此请确保在imgUrl之前加上:。

使用组件url参数访问资产文件夹

1 个答案: