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

Question

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

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

页面/index.vue

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

组件/Thumbnail.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。

原文由 SooJungChae 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 src 属性将被 Webpack 替换，您可以像这样执行 require 函数

子组件示例.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>

原文由 Aditya Kresna Permana 发布，翻译遵循 CC BY-SA 4.0 许可协议