如何通过 vue.js 中的 props 传递图像 url

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 prop 跟踪图像模块依赖项，因此它不会尝试解析它。

解决方案是使用表达式来要求它。

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

子组件：

<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>