Vue 3 Vite -动态img源

Question

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

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

它在两种情况下都工作得很好:在dev模式下运行时，以及在vite构建之后。但我有一些图像名称存储在数据库中动态加载(菜单图标)。在这种情况下，我必须像这样编写路径：

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

(menuItem.iconSource包含镜像的名称，如"my-image.png")。在这种情况下，它在开发模式下运行应用程序时起作用，但在生产构建之后不起作用。当Vite为生产环境构建应用程序时，路径会发生变化(所有assests都放在_assets文件夹中)。静态图像源由Vite build处理，路径也会相应地更改，但合成的图像源并非如此。它简单地将/src/assets/images/作为常量，并且不改变它(我可以在网络监视器中看到，当应用程序抛出404Not found for image /src/assets/images/my-image.png时)。我试图找到解决方案，有人建议使用require()，但我不确定vite是否能利用它。

Answer 1

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

vite documentation

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 2

请尝试以下方法

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

Answer 3

在基于Webpack的Vue应用中，用于解决此场景的require()或import()确实是Webpack独有的构造

在幕后，Webpack通过使路径固定部分(/src/assets/images/)中的每个文件都成为应用程序包的一部分并可用于导入来处理此类动态导入。对于图像，这通常意味着创建某种内部映射，如下所示：

{
 'src/assets/images/image1.png' : 'assets/img/image1.hash.png',
  ...
}

关键是图像在源树中的路径。该值是构建过程中负责处理图像的加载器创建的路径(捆绑应用程序中图像的路径)。该映射由Webpack在运行时使用，用于将动态生成的路径“解析”为图像的真实路径

在Vite中没有地图，但是您可以通过使用Glob Import创建一个与上面描述的地图类似的“地图”，并使用use require() yourself来执行类似的操作

或者你可以使用this plugin以不太透明的方式做一些类似的事情。

有关更多细节，请参阅this GitHub issue

更新

由于Vite在幕后使用Rollup，使用plugin-dynamic-import-vars可能是另一种解决方案，其用法非常类似于Webpack...

但是它目前的limitation只允许相对路径，这使得Glob导入可能是更好的选择