为什么给img标签中的src参数绑定一个变量在vuejs中不起作用？

Question

我有一个包含 img 标签的 Vuejs 组件。如果我像这样硬编码 src，我可以毫无问题地渲染图像。

<template>
    <div>
        <!-- <img class="rotate logo" alt="Vue logo" src="@/assets/abstractwave.png"/> -->
    </div>
</template>

<script>
export default {
    name: "RotatingImage",
    props: {
        filename: String
    },

}
</script>

如果我将 src 作为 prop 插入绑定，我将无法渲染图像。如下…… 这是为什么呢？我必须更改什么才能使用道具渲染图像？

<template>
    <div>
        <img class = "rotate" alt="Vue logo" :src="`@/assets/${filename}`" />
    </div>
</template>

<script>
export default {
    name: "RotatingImage",
    props: {
        filename: String
    },

}
</script>

在浏览器中查看，src路径是正确的，但是图片不显示。

Answer 1

你可以计算属性:

computed: {
  getImgUrl() { 
     return require(`@/assets/${this.filename}`);
  }
}

然后在模板中绑定它：

<img class = "rotate" alt="Vue logo" :src="getImgUrl" />

为什么给img标签中的src参数绑定一个变量在vuejs中不起作用？

Why does binding a variable to the src parameter in the img tag not work in vuejs?

image

vue.js

bind

src