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

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 3和Vite作为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(和bundler为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(和bundler为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}`"
/>

Answer 2

我们可以使用v-bind动态地为它们分配一个字符串值。读取此

尝试如下：

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

或用于简写语法

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