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

中关村能力建设网站东莞市企业招聘信息网

news 2025/11/6 14:16:31

中关村能力建设网站,东莞市企业招聘信息网,网页浏览器怎么扫描二维码,自动发外链工具今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。 list: [{ id: 1, name: 欧拉公式啤酒杯, price: 30.00, src: ./assets/images/Euler.png},{ id: 2, name: 高斯分布马克杯, price: 40.00, src: ./…

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