如何在nuxt项目中传递动态图片url

Question

我想将图像 url 传递给子组件，但图像未显示。

我试过v-attr, :attr,:src属性。

页面/index.vue

<ThumbNail img-url="assets/img/igsim_intro.png"/>

组件/缩略图.vue

<!-- Failed to resolve directive: attr -->
<img v-attr="imgUrl" /> 

<!-- 404 Not found: http://localhost:3000/assets/img/pds_main.png -->
<img :src="imgUrl" />

<img :attr="{src: imgUrl}" /> 

<script>
export default {
  name: "ThumbNail",
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

我希望Thumbnail.vue将图像显示为传递的 url。

Answer 1

由于src属性将被 Webpack 替换，因此您可以执行这样的require功能

ChildComponentExample.vue

<templae>
  <div>
    <img :src="imageUrl">
  </div>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

父组件.vue

<template>
  <ChildComponentExample :image-url="require('~/assets/myimage.png')" />
</template>

Answer 2

<!-- 404 Not found: http://localhost:3000/assets/img/pds_main.png -->

这表明这种方式是正确的！你的图像路径有什么问题。看看你的 pds_main.png 是否在路径：/assets/img/