首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

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

2019年04月04日 发布 阅读(321) 作者:懒炖

假设项目路径是这样

  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 国际 许可协议,如需转载,请注明出处

评论

  •