Question

我一直在尝试将一个prop传递给一个组件，该组件是指向Section组件的图像的URL，以更新dom v-bind:src标签的img，但是不知该图像没有显示

我看不到有什么问题。

文件：App.vue

<template>
  <div id="app">
    <Section img="../assets/linux.png" />
  </div>
</template>

<script>
import Section from "./components/Section.vue";

export default {
  name: "app",
  components: {
    Section
  }
};
</script>

文件：Section.vue

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

<script>
export default {
  props: {
    img: String
  }
};
</script>

Answer 1

我怀疑问题是由于您使用的相对路径引起的。我假设../assets/linux.png解析为正确的图像URL 关于 App.vue，但实际上它需要解析为正确的图像 关于< / em> 。您的<Section>组件。

根据我从共享代码中得出的结论，看来您可以通过更新App.vue来解决此问题，如下所示：

<template> <div id="app"> <Section img="../../assets/linux.png" /> </div> </template> ...

但是，我应该指出，通过像这样的道具传递图像源绝对不会给您带来任何好处。由于它未绑定到App.vue中的反应性数据属性，因此您也可以完全省略该属性。

Vue.js问题：道具不会更改图片v-bind：src

1 个答案: