Question

我将图像名称存储在本地存储中。

我的本地存储数据是：

Key:contact
data:[{"id":1,"name":"","query":"","image":"'./Koala.jpg'","price":""}]

我的代码在下面

  return ( 
        <React.Fragment>
            <h2>Products Cataloge.</h2>
            <div className="container" id="con">
                <div className="row">
                    {this.state.comment.map((item,index)=>(
                        <div className="col-md-4" >
                            <div className="card" id="card1" >
                                <img className="card-img-top" src={require(item.image)} alt="Card image"/>
                                <div className="card-body">
                                    <h4 className="card-title">{item.name}</h4>
                                    <Link to={`/description/${item.id}`} ><button className="btn btn-primary">View Discription</button></Link> 
                                </div>
                            </div>
                        </div>
        ))}
                </div>
           </div>
        </React.Fragment>
     );

Answer 1

对于文件和url路径，您希望它们的格式为“ ./path”或“ ./path”

通过将data.image设置为data { image: "'./Koala.jpg'" }，您将返回包括单引号在内的整个字符串值'./Koala.jpg'

const data = {imageGood:" ./Koala.jpg " , imageBad:"'./Koala.jpg'"}

console.log('imageBad' , data.imageBad)    // "'./Koala.jpg'"
console.log('imageGood', data.imageGood)   //  "./Koala.jpg"

如果您可以更改数据的填充方式，请更改：

data:[{"id":1,"name":"","query":"","image":"'./Koala.jpg'","price":""}]

收件人：

data:[{"id":1,"name":"","query":"","image":"./Koala.jpg","price":""}]

否则，您将需要手动删除它们。一种简单的方法：

const item = {image:" './Koala.jpg' "}
console.log( item.image.split("'").join('') )

无法使用变量显示图像

1 个答案: