当前位置：首页 > news >正文

Vue3学习：vue组件中的图片路径问题

news 2025/7/6 23:05:51

今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。

  list: [{ id: 1, name: '欧拉公式啤酒杯', price: '30.00', src: './assets/images/Euler.png'},{ id: 2, name: '高斯分布马克杯', price: '40.00', src: './assets/images/Gauss.png' },{ id: 3, name: '泊松分布马克杯', price: '40.00', src: './assets/images/Poisson.png' },{ id: 4, name: '范德瓦尔斯方程搪瓷杯', price: '35.00', src: './assets/images/Vander.png'},]

后来查了一下资料，有两种解决方法。
方法一 new URL(‘路径’,import.meta.url).href

new URL('./assets/images/Euler.png', import.meta.url).href

  list: [{ id: 1, name: '欧拉公式啤酒杯', price: '30.00', src: new URL('./assets/images/Euler.png', import.meta.url).href },{ id: 2, name: '高斯分布马克杯', price: '40.00', src: new URL('./assets/images/Gauss.png', import.meta.url).href },{ id: 3, name: '泊松分布马克杯', price: '40.00', src: new URL('./assets/images/Poisson.png',import.meta.url).href },{ id: 4, name: '范德瓦尔斯方程搪瓷杯', price: '35.00', src: new URL('./assets/images/Vander.png',import.meta.url).href },],

方法二把图片放到public目录下的images文件夹中

list: [{ id: 1, name: '欧拉公式啤酒杯', price: '30.00', src: '/images/Euler.png'},{ id: 2, name: '高斯分布马克杯', price: '40.00', src: '/images/Gauss.png' },{ id: 3, name: '泊松分布马克杯', price: '40.00', src: '/images/Poisson.png' },{ id: 4, name: '范德瓦尔斯方程搪瓷杯', price: '35.00', src: '/images/Vander.png'},]