vue之图片路径

vue 图片路径

一般assets放内部的图片，static放外部修改的图片，不会编译（修改方便）

assets里的资源在打包后会重命名，

用法：

1.将图片作为模块加载进去，比如images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]这样webpack就能将其解析

<template>
    <div>
        <img  :src="imgUrl[0].src"/>
    </div>
<template>

//js部分
data(){
  return {
    imgUrl:[{src:require(‘./1.png’)},{src:require(‘./1.png’)}]
  }
}

 2.将图片放到static目录下，但必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]这样图片也会显示出来

当图片过多时，可以把图片路径写在json里，/static/img.json，

<div v-for="item in images">
    <img  :src="item.src"  />
</div>

import imgJson  from  '../static/img.json'  //不知为何改成绝对路径/static就报错

data(){
    return {
        images:imgJson.imgArr
    }
}
//
var imgJson = {
    imgArr:[
        {
            src:'/static/img/aa.png'
        },
         {
            src:'/static/img/aa.png'
        }
    ]
}