如何解决 nuxt 3 中的动态图像路径问题，我的图像未在浏览器上显示

Question

我正在使用的动态图像路径。我也使用过 require 但它显示错误 require undefined

<img :src="`../assets/images/${director.image}`" :alt="director.name">

但是当我使用 _nuxt 时它就会工作

<img :src="`_nuxt/assets/images/${director.image}`" :alt="director.name">

页面脚本

data() {    
 return {       
directors: [         
{           
image: "directorsImg1.png",         
},         
{           
image: "directorsImg2.png",         
},        
 {           
image: "directorsImg3.png",         
}       
]     
};   
},   
methods: {     
toggleModal(director)
 {       
this.selectedDirector = director;       
this.showModal = !this.showModal;     
}   
}

Answer 1

使用变量路径时需要完整的文件目录

<template>
    <img :src="showImageIndex === 1 ? Img1 : Img2"/>
</template>


<script setup>

import Img1 from '../assets/images/Img1.png';
import Img2 from '../assets/images/Img2.png';

const showImageIndex = ref(1);

<script>

---

_nuxt/...

工作的原因是你使用的是静态路径，就像使用CDN的路径一样，这与

vite

无关，图像已经被

vite

捆绑在

_nuxt

文件夹中。当您在生产模式下运行此程序时，将为静态文件添加随机哈希尾部，并且此方法将不起作用。