vue-cli 中一个关于父子件图片路径传值的问题 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
varzy
V2EX    问与答

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

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

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

    我目前有这样一个需求:

    子组件中需要引入一个图片,而这个图片的引用路径由父组件通过 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     Solana     2504 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    Worldis powered by solitude
    VERSION: 3.9.8.5 28ms UTC 10:38 PVG 18:38 LAX 02:38 JFK 05:38
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86