vue.js 如何解决nuxt3中的动态图像路径问题?我的图像无法在浏览器上显示

f5emj3cl  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(513)

我正在使用的动态图像路径。我也使用了require,但它显示了一个错误require undefined
第一个月
但是当我使用_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;     
}   
}

字符串

cld4siwp

cld4siwp1#

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

<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文件夹中。当你在prod模式下运行这个时,静态文件会增加随机哈希尾,这种方法是行不通的。

相关问题