V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
varzy
V2EX  ›  问与答

vue-cli 中一个关于父子件图片路径传值的问题

  •  
  •   varzy · 2017-08-25 16:26:20 +08:00 · 4406 次点击
    这是一个创建于 2655 天前的主题,其中的信息可能已经有所发展或是发生改变。

    题目有些乱。。。请原谅理科生的表达功底。

    我目前有这样一个需求:

    子组件中需要引入一个图片,而这个图片的引用路径由父组件通过 props 传入。目前子组件确实可以接收到这个路径值,但不会被解析成正确的路径。网上找了一通也没有找到相关的问题。

    主要代码如下:

    父组件:

    <index-card imgPath="~assets/crowd.png"></index-card>
    

    子组件:

    <template>
      <div>
        <img :src="imgPath">
      </div>
    </template>
    
    
    <script>
      export default {
        props: {
          'imgPath': {
            type: String
          }
        }
      }
    </script>
    

    webpack.base.conf.js:

    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'assets': resolve('src/assets')
    }
    

    通过打印可以得到 imgPath 的值就是 ~assets/crowd.png,而非正确的路径。现在我该怎样才能实现父子件给值,子组件正确解析并引用图片的效果?求各位给个思路。

    11 条回复    2017-08-29 22:25:30 +08:00
    jaylee77
        1
    jaylee77  
       2017-08-25 17:14:55 +08:00
    ~assets/crowd.png 这是一个正常的路径?
    ijse
        2
    ijse  
       2017-08-25 17:18:57 +08:00
    既然用了 Webpack, 就把图片当作 资源,而非路径 处理

    data 中:
    myImg: require('~assets/crowd.png')

    然后
    <index-card :imgPath="myImg"></index-card>
    varzy
        3
    varzy  
    OP
       2017-08-25 17:23:27 +08:00
    @ijse 其实我尝试过这样的写法,但这样写会直接报错:

    in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/xxx/index.vue
    Module not found: Error: Can't resolve '~/asset/crowd.png' in 'D:\CodeHub\xxx\src\components\xxx'
    varzy
        4
    varzy  
    OP
       2017-08-25 17:25:28 +08:00
    @jaylee77 是的。请看这的 “ URL 解析” 一节: https://lvyongbo.gitbooks.io/vuejs-templates/content/static.html
    Dzinlife
        5
    Dzinlife  
       2017-08-25 17:59:40 +08:00
    报错是你没装对应的 loader,请使用 url-loader 或 file-loader
    varzy
        6
    varzy  
    OP
       2017-08-25 18:01:33 +08:00
    @Dzinlife hi, 我这边使用的是 vue-cli,是带有这两个 loader 并且已经配置好的
    leopku
        7
    leopku  
       2017-08-25 18:19:59 +08:00 via iPhone
    你这表达那里理科了?分明是文科生的!
    varzy
        8
    varzy  
    OP
       2017-08-25 18:22:13 +08:00
    @leopku 关注问题本身啊老哥。我都快要纠结死了 (╯°Д°)╯︵ ┻━┻
    ode
        9
    ode  
       2017-08-29 17:51:32 +08:00
    和你遇到一样的问题 搜索过来的 楼主解决了么
    ode
        10
    ode  
       2017-08-29 17:57:24 +08:00
    解决了 子组件内把图片手动 require 一下
    varzy
        11
    varzy  
    OP
       2017-08-29 22:25:30 +08:00
    @ode 我这边也解决了。解决方案如二楼所说,只不过写法并不是 require('~/xxx.png'), 因为 ~ + 路径 这种写法是用在 template 中的。如果 require 的话,写图片的路径即可。比如我的就是 require('@/assets/xxx.png')。

    不过我很好奇,你在子组件中直接 require 图片,那如果想更换图片怎么办?父组件不是不能控制了吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   916 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 20:35 · PVG 04:35 · LAX 12:35 · JFK 15:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.