vue学习笔记9——图片路径问题

时间:2022-12-26 13:27:46

vue学习笔记9——图片路径问题

当npm run build的时候生成dist文件夹后

会有css中的background-img显示不出来或是js中或<script>中的url或是其他的引入,导致图片无法显示的问题
vue学习笔记9——图片路径问题
一般,开始的时候,我们习惯在assets里面存在img文件,(至少我是这么做的)

当时的static文件夹里为空,

当npm run build的时候会自动生成static文件夹,并在里面生成对应的js,css,img3个文件夹,存放静态文件

vue学习笔记9——图片路径问题

npm run build完成后要在dist文件夹中的index能打开有显示时,可能有下列问题:

可能存在 js没有加载出来,导致页面没有任何的显示

可能存在图片,没有加载出来,不管是css中还是js中或是<script>中的

解决:

在webpackbase中,目前版本的vue-cli脚手架搭建出来的是这个样子的
vue学习笔记9——图片路径问题

一个三目,判断是build还是dev,所以去config文件夹中的index.js文件中查看

vue学习笔记9——图片路径问题

在build模块中

    assetsPublicPath: './',  //默认是 '/'  ,我改成的'./'

让其指向根目录dist

js中的用require 方法,使图片可正常的显示:

<script>
export default{
data () {
return {
hot_sells: [
{url: '/static/img/shuncai/Avalokitesvara/Avalokitesvara1.jpeg'},
// {url: './assets/img/shuncai/Buddha/Buddha2.jpeg'},
{url: require('../../../../assets/img/shuncai/jade/jade3.jpeg')}, // 将js中所有的url,都使用require+相对路径的方法来引入图片。
{url: '../../../../assets/img/shuncai/jade/jade3.jpeg'},
{url: '../../../assets/img/shuncai/leaf/leaf1.jpeg'}
]
}
}
}
</script>

css中的图片和template中的图片用相对路径指向assets/img(存放图片的文件夹)

vue学习笔记9——图片路径问题

再次npm run build 完成后,再到dist中的index.html文件可以通过编辑器自带的服务器打开,就不会出现js和图片的加载丢失的问题了

我会在

vue学习笔记10

的时候

写我的这个简单的demo的github地址

vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。