vue.js - 如何通过 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 属性跟踪图像模块依赖性，因此它不会尝试解析它。

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

A context is created if your request contains expressions, so the exact module is not known on compile time.

子组件:

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