美文网首页
vue的图片路径问题

vue的图片路径问题

作者: 走错说爱你 | 来源:发表于2017-08-25 21:11 被阅读0次

在学习vue的过程中,我发现一个问题如下:
引用图片的时候,用以下方式完全没问题:

![](../assets/goods1.png)

但是,将图片路径写在js里面就不行了,如下:

![](item.path)
export default {
    name: 'allList',
    data () {
      return {
        item: {
            path: './../assets/goods1.png',
            name: '普洱茶',
            price: '$100'
        }
      }
    }
  }

最终解决方法为:

  • 使用import或require引入图片资源,如下为使用import引入:
import path1 from './../assets/goods1.png'

export default {
    name: 'allList',
    data () {
      return {
        item: {
            path: path1,
            name: '普洱茶',
            price: '$100'
        }
      }
    }
  }
  • 也可以将图片放入外面的static文件夹内,然后:
export default {
    name: 'allList',
    data () {
      return {
        item: {
            path: './.../static/goods1.png',
            name: '普洱茶',
            price: '$100'
        }
      }
    }
  }

最后成功解决问题!

相关文章

  • Vuejs图片编译后失败的问题

    问题: (vue.js)vue-cli 打包之后图片引用路径;描述:这是我的组件的路径;./src/compone...

  • vue的图片路径问题

    在学习vue的过程中,我发现一个问题如下:引用图片的时候,用以下方式完全没问题: 但是,将图片路径写在js里面就不...

  • vue中图片路径问题

    vue中图片引用可分为两种: 一、直接应用:这种的话直接引入本地文件中的图片就可以 二、动态添加 1、本地文件:需...

  • 总结

    1,图片路径引用 问题:vue项目上线后一般放在子目录里面 使用常规的图片路径引用的方式在本地运行是没有问题的 ...

  • vue 动态加载图片路径

    在用vue-cli脚手架生成的vue项目开发中,动态加载图片本地运行没有问题,但是打包后图片无法显示,图片路径40...

  • vue 关于图片路径的问题

    图片放在assets文件夹下面,在html模块或者css中引入图片的时候用相对路径 图片放在assets文件夹下面...

  • vue→显示本地图片

    1、backgroundImage路径问题(vue里面放背景图片) 来源:https://blog.csdn.ne...

  • vue项目路径问题和安卓4.4不兼容问题

    图片问题 vue-cli项目默认js、css等路径都是绝对路径,在dev下可能没有问题,但是build之后可能会出...

  • 从零开始搭建一个vue项目 -- vue-cli/cooking

    从零开始搭建一个vue项目 -- vue-cli/cooking-cli(二) 1.配置图片路径 图片的路径有多种...

  • Vue项目静态文件之图片引入

    在Vue中组件里引入图片时,往往会因为路径问题导致我们图片出不来 解决如下: 一:图片的显示 图片url在js的d...

网友评论

      本文标题:vue的图片路径问题

      本文链接:https://www.haomeiwen.com/subject/lrepdxtx.html