vue学习笔记9——图片路径问题
当npm run build的时候生成dist文件夹后
会有css中的background-img显示不出来或是js中或<script>
中的url或是其他的引入,导致图片无法显示的问题
一般,开始的时候,我们习惯在assets里面存在img文件,(至少我是这么做的)
当时的static文件夹里为空,
当npm run build的时候会自动生成static文件夹,并在里面生成对应的js,css,img3个文件夹,存放静态文件
npm run build完成后要在dist文件夹中的index能打开有显示时,可能有下列问题:
可能存在 js没有加载出来,导致页面没有任何的显示
可能存在图片,没有加载出来,不管是css中还是js中或是<script>
中的
解决:
在webpackbase中,目前版本的vue-cli脚手架搭建出来的是这个样子的
一个三目,判断是build还是dev,所以去config文件夹中的index.js文件中查看
在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(存放图片的文件夹)
再次npm run build 完成后,再到dist中的index.html文件可以通过编辑器自带的服务器打开,就不会出现js和图片的加载丢失的问题了
我会在
vue学习笔记10
的时候
写我的这个简单的demo的github地址
vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。