时间戳

首页 > 解决方案 > Vue.js 问题：道具不会改变图像 v-bind:src

vue.js - Vue.js 问题：道具不会改变图像 v-bind:src

问题描述

我一直在尝试将一个道具传递给一个组件，该组件是一个图像的 URL，供 Section 组件更新v-bind:srcdomimg标签，但不知何故，图像没有显示出来。

我看不出有什么问题。

文件：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>

标签： vue.js

解决方案

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

根据我从您共享的代码中可以看出的情况，您似乎可以通过App.vue如下更新来解决此问题：

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

...

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

推荐阅读