从prop动态导入图片-Vue 3 Composition API

ecr0jaav 于 2023-10-23 发布在 Vue.js

关注(0)|答案(2)|浏览(202)

如何动态导入图像，只将其名称作为 prop 从父对象发送到子对象？
父项：

<Message
   v-if="cartItems.length == 0"
   text="Još nemate proizvoda u košarici."
   imageName="empty-cart"
/>

孩子：

<template>
  <div class="message-wrapper">
    <img
      :src="`../assets/${props.imageName}.png`"
      :alt="`${props.imageName}-img`"
    />
    <p>{{ props.text }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  text: String,
  imageName: String,
});
</script>

我收到错误：GET http://localhost:5173/assets/empty-cart.png 404 (Not Found)
但是当我将其更改为静态图像导入时，它可以工作：

<template>
  <div class="message-wrapper">
    <img
      src="../assets/empty-cart.png"
      alt="img"
    />
    <p>{{ props.text }}</p>
  </div>
</template>

vue.js

来源：https://stackoverflow.com/questions/77156570/dynamically-import-images-from-prop-vue3-composition-api

2条答案

按热度按时间

vh0rcniy1#

使用Vite，解决方案是使用新的URL（url，Meta）
比如说，

<template>
  <div class="message-wrapper">
    <img :src="imageUrl" :alt="`${imageName}-img`" />
    <p>{{ props.text }}</p>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  text: String,
  imageName: String
})

const imageUrl = computed(
  () => new URL(`/src/assets/${props.imageName}.png`, import.meta.url).href
)
</script>

作为一个侧面说明，props.imageName中的props在<template>代码中使用时是不必要的。它是自动剥离的，所以包含它并不重要。

赞(0）回复(0）举报 2023-10-23

tf7tbtn22#

您可以尝试使用require()。
举例来说：

<template>
  <div class="message-wrapper">
    <img
      :src="require(`@/assets/${props.imageName}`)"
      alt="img"
    />
    <p>{{ props.text }}</p>
  </div>
</template>

在本例中，props.imageName应该是图像名称及其扩展名。例如，props.imageName = "empty-cart.png"

赞(0）回复(0）举报 2023-10-23

我来回答

从prop动态导入图片-Vue 3 Composition API

2条答案

相关问题

热门标签

最新问答