Vue 3 Vite-动态图片src

Question

我正在使用 Vue 3 和 Vite。在 Vite 构建生产后，我遇到了动态 img src 的问题。对于静态 img src 没有问题。

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>

它在两种情况下都运行良好：在开发模式下运行时以及在 vite 构建之后。但我有一些图像名称存储在动态加载的数据库中（菜单图标）。在这种情况下，我必须像这样编写路径：

<img :src="'/src/assets/images/' + menuItem.iconSource" />

（menuItem.iconSource 包含图像的名称，如“my-image.png”）。在这种情况下，它在开发模式下运行应用程序时有效，但在生产构建后无效。当 Vite 为生产构建应用程序时，路径会发生更改（所有资源都放入_assets文件夹中）。静态图片源是由Vite build处理的，路径也会相应改变，但合成图片源则不然。它只是/src/assets/images/作为一个常量，不会改变它（当应用程序抛出 404 not find for image /src/assets/images/my-image.png 时，我可以在网络监视器中看到它）。我试图找到解决方案，有人建议使用require()，但我不确定 vite 是否可以使用它。

Answer 1

2022年更新：Vite 3.0.9 + Vue 3.2.38

动态src绑定的解决方案：

1.使用静态URL

<script setup>
import imageUrl from '@/assets/images/logo.svg' // => or relative path
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

2.使用动态URL和相对路径

<script setup>
const imageUrl = new URL(`./dir/${name}.png`, import.meta.url).href
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

3.具有动态URL和绝对路径

由于汇总限制，所有导入必须相对于导入文件开始，并且不应以变量开始。

您必须将别名替换@/为/src

<script setup>
const imageUrl = new URL('/src/assets/images/logo.svg', import.meta.url)
</script>

<template>
  <img :src="imageUrl" alt="img" />
</template>

2022年答案：Vite 2.8.6 + Vue 3.2.31

以下是对我的本地和生产构建有用的内容：

<script setup>
const imageUrl = new URL('./logo.png', import.meta.url).href
</script>

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

请注意，它不适用于 SSR

Vite 文档：新 URL

Answer 2

根据 Vite 文档，您可以使用此处提到和解释的解决方案：

维特文档

const imgUrl = new URL('./img.png', import.meta.url)

document.getElementById('hero-img').src = imgUrl

我在计算属性中使用它动态设置路径，如下所示：

    var imagePath = computed(() => {
      switch (condition.value) {
        case 1:
          const imgUrl = new URL('../assets/1.jpg',
            import.meta.url)
          return imgUrl
          break;
        case 2:
          const imgUrl2 = new URL('../assets/2.jpg',
            import.meta.url)
          return imgUrl2
          break;
        case 3:
          const imgUrl3 = new URL('../assets/3.jpg',
            import.meta.url)
          return imgUrl3
          break;
      }
    });

非常适合我。

Answer 3

我找到的最简单的解决方案是将图像放入public目录根目录的文件夹中。

例如，您可以在文件夹images内创建一个文件夹public，然后动态绑定图像，如下所示：

<template>
  <img src:="`/images/${ dynamicImageName }.jpeg`"/>
</template>

现在您的图像应该在开发和生产中正确加载。

Answer 4

根据这里的文档。对于动态图像，最好这样做......

/* create a util function or method or computed property
   also assuming your static images are in assets folder
*/
const getImageUrl = (path: string) => {
 return new URL(`../assets/${path}`, import.meta.url).href;
};

// and use in code like this assuming products is a list
<ul>
  <li v-for="product in products" :key="product.id">
   <img alt="nice image" :src="getImageUrl(product.img)" />
  </li>
</ul>

这对我来说非常有用，我希望它对某人有帮助。

Answer 5

您所需要的只是创建一个允许您生成 url 的函数。

来自 vite 文档静态资产处理

const getImgUrl = (imageNameWithExtension)=> new URL(`./assets/${imageNameWithExtension}`, import.meta.url).href;

//使用

<img :src="getImgUrl(image)" alt="...">

Answer 6

请尝试以下方法

const getSrc = (name) => {
    const path = `/static/icon/${name}.svg`;
    const modules = import.meta.globEager("/static/icon/*.svg");
    return modules[path].default;
  };