vue.js 维生素/维生素3：使用图像源作为 prop 时“未定义要求”

hwamh0ep 于 2023-01-09 发布在 Vue.js

关注(0)|答案(4)|浏览(148)

我从Vue CLI切换到Vite CLI，从Vue 3的组合API切换到SFC脚本设置API。

我以前的工作方式

当我使用官方Vue CLI时，我可以通过props传递路径的文件名来导入图像源：

<template>
  <img :src="require(`@/assets/${imagePath}`)"/>
<template/>

<script>
export default {
  props: {
    imagePath: { type: String },
  },
  setup() {
    // ...
  }
}
<script/>

然后这样称呼它：

<template>
  <Image imagePath="icon.png" />
</template>

迁移到Vite后收到的错误

但自从我迁移到Vite CLI后，我遇到了一个错误"未捕获ReferenceError：require is not defined "。我的文件现在使用脚本设置语法，如下所示：

<script setup>
const props = defineProps({
  imagePath: { type: String },
})
</script>

<template>
  <img :src="require(`@/assets/${props.imagePath}`)"/>
</template>

我所尝试的

我已经尝试过用相对路径直接从assets文件夹导入文件，并且成功了，但是我不能用import语句指定props的路径。
一个三个三个一个
我还尝试了模板中的import语句，但它甚至无法编译代码：

<script setup>
const props = defineProps({
  imagePath: { type: String },
})
</script>

<template>
  <img :src="import `./../assets/${props.iconPath}`" />
</template>

我错过了什么吗？也许有一个插件存在，可以帮助我实现这一点？

vue.js

来源：https://stackoverflow.com/questions/69696677/vite-vue-3-require-is-not-defined-when-using-image-source-as-props

4条答案

按热度按时间

fjnneemd1#

我也遇到了这个问题，我搜索了一下，发现根据这个github问题评论，
在使用Vite时，源代码中不应该有require。它只是ESM。
有关此内容的更多信息，请访问功能|Vite-静态资产
经过一番搜索，我找到了这个适用于我的Vue3代码示例link

<CarouselItem v-for="(item,index) of carouselData" :key="index">
 <img :src="getImageUrl(item.img_name)" />
</CarouselItem>

setup() {
  const getImageUrl = (name) => {
        return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    }
  return { carouselData, getImageUrl }
}

赞(0）回复(0）举报 2023-01-09

0pizxfdo2#

如果你使用的是require.context，新的方法似乎是glob import。

const locales = require.context("../../lang", true, /[A-Za-z0-9-_,\s]+\.json$/i)

致：

const locales = import.meta.glob('../../lang/*.json')

赞(0）回复(0）举报 2023-01-09

ehxuflar3#

在imagePath prop上使用监视器，动态导入映像，并使用结果更新ref（绑定到<img>.src）：

<script setup>
import { ref, watchEffect } from 'vue'

const props = defineProps({
  imagePath: { type: String },
})

const logo = ref()
watchEffect(async () => {
  logo.value = (await import(/* @vite-ignore */ `../assets/${props.imagePath}`)).default
})
</script>

<template>
  <img :src="logo">
</template>

demo

赞(0）回复(0）举报 2023-01-09

w3nuxt5m4#

对于那些将静态资产与vue + vite一起使用的人，他们可以使用这种方法。

import imgUrl from '../../img/bgimg.jpg'

export default {
     data() {
    return {
      bgImage: imgUrl
    };
  },

};

你可以这样使用它

<div class="ms-auto h-100 z-index-0 ms-n6"
    :style="{
    backgroundImage:
    'url(' +
    bgImage +
    ')',
    }"
></div>

赞(0）回复(0）举报 2023-01-09

我来回答

vue.js 维生素/维生素3：使用图像源作为 prop 时“未定义要求”

我以前的工作方式

迁移到Vite后收到的错误

我所尝试的

4条答案

相关问题

热门标签

最新问答