Question

由于某种原因它不起作用，对吗？

父项：

<achievement-post imgURL="../assets/ach1.jpg"></achievement-post>

<script>
import achievementPost from "../components/AchievementPost.vue";

// ...
</script>

子组件：

<template>
 <img :src="imgURL" />
</template>

<script>
export default {
  props: {
    imgURL: String
  },
    // ...
}
</script>

当我对URL进行硬编码时，它可以工作，所以我不确定发生了什么。请帮忙。

Answer 1

如果您使用的是Webpack，则无法使用字符串url属性跟踪图像模块的依赖关系，因此它将无法尝试解决它。

解决方案是要求它带有表达式。

如果您的请求包含表达式，则会创建一个上下文，因此确切的模块在编译时未知。

子组件：

<template>
 <img :src="require(`../assets/${imgURL}`)" />
</template>

<script>
export default {
  props: {
    imgURL: String
  },
    // ...
}
</script>

父项

<achievement-post imgURL="ach1.jpg"></achievement-post>

<script>
import achievementPost from "../components/AchievementPost.vue";

// ...
</script>

Answer 2

HTML属性不区分大小写：您应该避免在道具名称中使用大写字母。也许是您遇到问题的原因。

<achievement-post img_url="../assets/ach1.jpg"></achievement-post>

和

 export default {
      props: {
        img_url: String
      },
        // ...
    }

您可以在此页底部看到它： https://vuejs.org/2016/02/06/common-gotchas/ 或在此页面顶部： https://vuejs.org/v2/guide/components-props.html

如何通过vue.js中的道具传递图片网址

2 个答案: