vue - image Url作为不显示图像的道具

Question

我将imageSrc从App.vue传递到HelloWorld.vue，但图像没有显示

App.vue

<HelloWorld imageSrc="./assets/logo.png" />

HelloWORLD.vue

<template>
<div class="hello">
<img :src="imageSrc" alt="img" />
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
imageSrc: String,
},
};
</script>
<style scoped>
</style>

CodeSandbox:
https://codesandbox.io/s/cocky-hofstadter-bomkf?file=/src/components/HelloWorld.vue: 0 - 432

Answer 1

这将帮助你，它正在工作:

<template>
<div id="app">
<HelloWorld :imageSrc="logo" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
import Logo from "./assets/logo.png";
export default {
name: "App",
components: {
HelloWorld,
},
data: function () {
return {
logo: Logo,
};
},
};
</script>

工作沙箱:https://codesandbox.io/s/dark-haze-z3b7m?file=/src/App.vue: 0 - 331

Answer 2

移动您的assets文件夹到公共。应该没问题。

这是Demo的链接

从docs

放置在公共目录中并通过绝对路径引用的静态资产。这些资源将被简单地复制，而不是通过webpack。

要使用绝对路径访问静态资源，您应该将资源保存在公共文件夹中。

阅读文档获取更多信息。