父组件给子组件的img src传地址，加载不出图片

#1

小白希望封装一个照片下面加描述的组件，然后照片由父组件指定
于是
父组件使用Img通过imgURL传递图片地址

    return (
        <div>
            <Img imgURL='./lcb.jpg' />
        </div>
        )

子组件

const Img = (props) => {
    return (
        <div>
            <img src={props.imgURL} alt="My_Li" />
            <p>Licb1996@Foshan</p>
        </div>
    )
}

无论如何都加载不出来照片，唯一成功的是使用require(’./lcb.jpg’)，但是require里面不能接受变量，所以不能随时指定更换照片，请问我该怎么样才能实现父组件改变子组件的图片

#2

cosnt imgURL = require(’./lcb.jpg’)

这样props.imgURL才知道，袄，原来我是一张图片模块

#3

你这是路径不对吧

#4

你引用组件的时候这样引用

import img from ''./lcb.jpg';
<Img imgURL={img}>
1 Like
#5

谢谢老哥~我差点都放弃了

#6

用 require 也可以

#7

用require也可以接受变量啊，用模板字符串${props.imgUrl}

#8

这和用模板字符串有什么关系，这个本身就是字符串。用 import 引用下，应该可以了。