1、具体情况
将图片放在src/assets/img文件夹下面,循环图片的话,图片显示不出来
就像下面这样,图片是显示不出来的
<template> <div v-for="img_url of images"> <img :src="img_url"> </div> </template> <script> export default { data(){ return{ images:['@/assets/img/kefu.png','@/assets/img/yuyue.png'] } } } </script>
但是如果直接在<img/>
标签上面将src定义为'@/assets/img/kefu.png'
就可以显示出来,就像下面代码这样
<template> <img src="@/assets/img/kefu.png"> </template>
2、解决方案
(1)解决方案一
用require将src包裹起来,如下
images:[require('@/assets/img/kefu.png'),require('@/assets/img/yuyue.png')]
这样再循环图片就可以显示了
(2)解决方案二
如果不想在data中将图片路径写死,而是想放在json文件或者数据库中加载,上面这种方法就不合适了
就得看为什么本来图片加载不出来,用require将路径包裹起来才可以加载图片
因为在vue项目中,唯一可以外部访问的文件是static文件夹,src文件夹是不可以通过外部访问的,只能我们内部代码调用。
如果图片不是放在static文件夹下面,那么系统会先做一步编译工作,将图片编译成static文件夹的路径,图片才可以显示出来
这个路径我们在data中定义的是require('@/assets/img/kefu.png')
,在这里被编译成了/static/img/kefu.8f8acce.png
我们直接将图片放在static文件夹下面,就不需要这部分的编译工作了
放在static文件夹之后,不需要require
引用图片路径,图片也可以加载出来
<template> <div v-for="img_url of images"> <img :src="img_url"> </div> </template> <script> export default { data(){ return{ //将图片放在了static路径下面 images:['/static/img/kefu.png','/static/img/yuyue.png'] } } } </script>