首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

vue项目v-for中动态图片路径拼接

2019年04月04日 发布 阅读(4758) 作者：Jerman

假设项目路径是这样

  1. |-- build
  2. |-- dist
  3. |   |-- css
  4. |   |-- images
  5. |   └-- js
  6. |-- mock
  7. |   └-- product
  8. └-- src
  9.     |-- assets
  10.     |    └--img
  11.     |        └--1.png
  12.     |-- components
  13.     |-- router
  14.     |-- store
  15.     |-- utils
  16.     └-- views
  17.         └--product
  18.             |--detail.vue
  19.             └--img
  20.                 └--1.png

在上面项目中detail.vue文件需要动态调用1.png

一、使用绝对路径

  1. <ul>
  2.     <li v-for="(item,index) in data.orderList" :key="index">
  3.         <img :src="'/views/product/img/' + (index+1) + '.png'" />
  4.     </li>
  5. </ul>

二、使用require

  1. <ul>
  2.     <li v-for="(item,index) in data.orderList" :key="index">
  3.         <img :src="require('./img/' + (index+1) + '.png')" />
  4.     </li>
  5. </ul>

三、使用相对调用，图片需要放到根目录下的assets下

  1. <ul>
  2.     <li v-for="(item,index) in data.orderList" :key="index">
  3.         <img :src="'../../assets/img/' + (index+1) + '.png'" />
  4.     </li>
  5. </ul>
版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处

© 2018 IMQIANDUAN.COM 粤ICP备18143223号