图片引用和打包问题

[Leopold1988]

在view里二级文件夹，一个文件夹就是一个html，jsvuehtml 都统一放在当前文件夹里，当然你也可以继续放其他的资源，例如css、图片等，webpack会打包到当前模块里。

我在jsvuehtml同级目录存放了图片并使用相对路径引用，图片存在且名字无误，但是会404，有什么办法解决么？

[bluefox1688]

贴些代码或者错误截图来看看

[Leopold1988]

<div class="flex-demo">
          <img src="1.jpg">
          <img src="2.jpg">
          <img src="3.jpg">
        </div>

[Leopold1988]

还一个我用了vux2的swiper，build了之后，图片也没有在在dist/static下面，看了下swiper使用的是background，如下如：

<template>
  <div id="indexmain">
    <swiper loop auto :list="swiperlist" :index="swiperindex" @on-index-change="indexChange"></swiper>
    <flexbox>
      <flexbox-item>
        <div class="flex-demo">

        </div>
      </flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
      <flexbox-item><div class="flex-demo">3</div></flexbox-item>
      <flexbox-item><div class="flex-demo">4</div></flexbox-item>
    </flexbox>
    <tabbar>
      <tabbar-item>
        <img 
          slot="icon" 
          src="../../../assets/demo/icon_nav_button.png">
        <span slot="label">Wechat</span>
      </tabbar-item>
      <tabbar-item show-dot>
        <img 
          slot="icon" 
          src="../../../assets/demo/icon_nav_msg.png">
        <span slot="label">Message</span>
      </tabbar-item>
      <tabbar-item selected link="/component/demo">
        <img 
          slot="icon" 
          src="../../../assets/demo/icon_nav_article.png">
        <span slot="label">Explore</span>
      </tabbar-item>
      <tabbar-item badge="2">
        <img 
          slot="icon" 
          src="../../../assets/demo/icon_nav_cell.png">
        <span slot="label">News</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import Lib from 'assets/js/Lib';
import { Tabbar, TabbarItem, Swiper, Flexbox, FlexboxItem } from 'vux'

const baseList = [{
  url: 'javascript:',
  img: '../../static/img/1.jpg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: '../../static/img/2.jpg',
  title: '送你一辆车'
}, {
  url: 'javascript:',
  img: '../../static/img/3.jpg',
  title: '送你一次旅行'
}]

const urlList = baseList.map((item, index) => ({
  url: 'http://m.baidu.com',
  img: item.img,
  title: `(可点击)${item.title}`
}))

export default {
  components: {
    Tabbar,
    TabbarItem,
    Swiper,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      swiperlist: urlList,
      swiperindex: 0
    }
  },
  methods: {
    indexChange (index) {
      this.swiperindex = index
    }
  }
}
</script>

<style lang="less" scoped>
.flex-demo {
  text-align: center;
  color: #fff;
  background-color: #20b907;
  border-radius: 50%;
  background-clip: padding-box;
}
</style>

[mackxu]

@bluefox1688

提供的例子中，引用iconfont的css是在static/css/vendor.css, 正好对上font目录。代码如下： font-family:iconfont;src:url(../../static/fonts/iconfont.eot)

但是如果引用iconfont的css是static/css/views/home/list.css。图片路径就出问题了。

如果说的不对，望指正

[634323580]

@Leopold1988 请问解决了吗，我也遇到这个问题，css引用背景图片路径错误

[mackxu]

@634323580 有一种解决办法，打包资源时用绝对路径：在webpack里添加publicPath

[634323580]

@mackxu 再请问一个问题，打包后的图片怎么才能做到每个页面图片单独放一个文件夹

[zuishuanglin]

@634323580 他的例子就是单独的一个assets的文件夹，但是我里面的图片就是build不出来，只有dome的那个一直存在