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

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

article 2025/1/15 8:09:17

今天在做一个案例的时候，图片放在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'},
      ]