组件vuejs中的img源代码

Question

我是vue js的新手，在组件中的img有问题

这是我的代码：

组件

<template>
<div class="features">
<div class="features_text">
<h2>{{title}}</h2>
<h3>{{text}}</h3>
</div>
<div class="features_img">
<img src="{{src}}" alt="">
</div>
</div>
</template>
<script>
export default {
name: `Features`,
props: {
title: String,
text: String,
src: String
}
}

页码：

<template>
<div>
<Features title="a title" text="a text" src="../assets/image.png">
</div>
<template>

但没有图像显示

我该怎么做？

Answer 1

如注释中所述，请确保将Features组件内的绑定更改为：

<img :src="src" alt="" />

如果这没有帮助，请尝试导入图像，而不是使用相对路径。这样，如果您的路径错误，您可能会收到一条错误消息。

import myImageSource from 'path/to/image.png'

Answer 2

将绑定附加到src属性

<img :src="{{src}}" alt="">

Vue文档上的v-bind