关于vue打包后图片路径找不到的问题

托小托的编程老师

已于 2023-11-30 11:29:31 修改

阅读量5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： niqo 文章标签： vue

于 2018-08-07 14:13:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_30479905/article/details/81480314

niqo 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在前端项目中如何正确配置静态资源的路径，包括使用相对路径和绝对路径的方法，以及如何通过配置解决打包后图片路径错误的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//asserts引入的静态资源是相对路径
//<img src=“…/…/…/asserts/img/pic3.jpg”/>
//而static引入静态资源时必须是绝对路径
//<img src=”/static/img/pic3.jpg”/>
slides: [
{
//当asserts引入动态绑定的静态资源时，需要以模块的方式导入资源，
//将图片作为模块加载进去
src: require('…/…/…/asserts/img/pic1.jpg’),
title: ‘女人节优惠’,
href: ‘detail/yslqd’
},
{
src: '/static/img/pic2.jpg’,
title: ‘满减优惠’,
href: ‘detail/ysllip’
}
]
因为有时候打包后的项目文件，不一定是放在服务器的根目录下，这样也会导致图片找不到，可以在config文件中的index.js中去配置
build: {
// Template for index.html
index: path.resolve(__dirname, ‘…/dist/index.html’),

// Paths
assetsRoot: path.resolve(__dirname, ‘…/dist’),
assetsSubDirectory: ‘static’,
//在这里把/改成./，如果这里加了./，那static文件夹引入的图片也要加./，这样无论打包后放到服务器的哪一级目录下，静态资源都不会报错
assetsPublicPath: ‘./‘
}
slides: [
{
src: require(’…/…/…/asserts/img/pic1.jpg’),
title: ‘女人节优惠’,
href: ‘detail/yslqd’
},
{
src: './static/img/pic2.jpg’,
title: ‘满减优惠’,
href: ‘detail/ysllip’
},
{
src: ‘./static/img/pic3.jpg’,
title: ‘精品巨惠’,
href: ‘detail/dior’
},
{
src: ‘./static/img/pic4.jpg’,
title: ‘精品巨惠’,
href: ‘detail/pdl’
}
]