在构建过程中动态设置 src 时，Nuxt 3 图像未渲染

Question

：我的 Nuxt3 应用程序遇到以下问题。当通过构建过程设置图像源时，template strings将不会渲染图像。否则，当我正常设置图像 src 时，它会出现。但我动态地需要它。有些预告片需要渲染不同的图像。

一切都工作正常，例如道具......

工作代码：

...
<img
  src="/assets/_DSC0238_E.jpg"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

不工作的代码：

...
<img
  :src="`props.image`"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

有什么方法可以解决这个问题呢？

Answer 1

如果您使用Nuxt 3withVite作为 Bundler

设置资产可组合。

export default function useAssets() {
  const svgs = import.meta.globEager('/src/assets/*.svg');
  const pngs = import.meta.globEager('/src/assets/*.png');
  const jpegs = import.meta.globEager('/src/assets/*.jpeg');

  return {
    aboutImage: svgs['/src/assets/aboutImage.svg'].default,
    search: svgs['/src/assets/search.svg'].default,
    info: pngs['/src/assets/info.png'].default,
  }; 
}

然后在任意文件中：

<template>
    <div>
      <img :src="assets.info">
    </div>
</template>
  
<script lang="ts">
import { defineComponent } from '@vue/runtime-core';
import useAssets from '../composable/useAssets';
  
export default defineComponent({
setup() {
  const assets = useAssets();
    return {
      assets,
    };
  },
});
</script>

资源

如果 (Vu3, Vue2, Nuxt 2) 和捆绑器是Webpack

需要require图片路径，并src在前面添加冒号设置动态属性:src

<img
  :src="require(`~/assets/${props.image}`)"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>

如果 (Vu3, Vue2, Nuxt 2) 和捆绑器是Vite

const getImage = async imgName => {
  // set the relative path to assets
  const module = await import(/* @vite-ignore */ `../../assets/${imagName}`)
  return module.default.replace(/^\/@fs/, '')
}

<img
  :src="getImage(props.image)"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>