vue - 图像网址作为道具不显示图像[重复]答案

【问题标题】：vue - image Url as prop not showing image [duplicate]vue - 图像网址作为道具不显示图像[重复]
【发布时间】：2021-12-07 20:24:57
【问题描述】：

我将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>

代码沙盒：
https://codesandbox.io/s/cocky-hofstadter-bomkf?file=/src/components/HelloWorld.vue:0-432

【问题讨论】：

这能回答你的问题吗？ Vue require dynamic image
您缺少 : 来表示 HelloWorld 组件上的道具。试试<HelloWorld :imageSrc='"./assets/logo.png"' />。还要注意图像 src 上的额外引号。

标签： javascript vue.js vuejs2

【解决方案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

【讨论】：

【解决方案2】：

将您的 assets 文件夹公开。它应该可以正常工作。

这是演示link

From the docs

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

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

阅读documentation了解更多信息。

【讨论】：