使用Glide和FireBase android存储和显示图像

I am trying to upload and display the profile picture using Glide & Firebase. Upload part is successfully working. But if i try to load that image from Database its showing blank.My motive is to load the profile_image while the user entered into the activity once and he can tap on the existing image and change that for his wish.

我正在尝试使用Glide和Firebase上传和显示个人资料图片。上传部分成功运行。但是,如果我尝试从数据库中加载该图像,则显示为空白。我的动机是在用户进入活动一次时加载profile_image,他可以点击现有图像并根据自己的意愿进行更改。

My code

public class User extends AppCompatActivity {

private ImageView imageView;
private Uri filePath;
private final int PICK_IMAGE_REQUEST = 71;
StorageReference storageReference;

private void loadImage(){

    Bundle bundle = getIntent().getExtras();
    assert bundle != null;
    final String retrievedName = bundle.getString("Name");

    // Reference to an image file in Cloud Storage
    StorageReference storageReference  = FirebaseStorage.getInstance().getReference().child(retrievedName).child("images/profile_image");
    imageView = findViewById(R.id.profile_image);

// Load the image using Glide
    Glide.with(User.this.getApplicationContext())
            .load(storageReference)
            .into(imageView );
}


private void uploadImage() {

    if(filePath != null)
    {

        Bundle bundle = getIntent().getExtras();
        assert bundle != null;
        final String retrievedName = bundle.getString("Name");

        storageReference = FirebaseStorage.getInstance().getReference();

        StorageReference ref = storageReference.child(retrievedName).child("images/profile_image");
        ref.putFile(filePath)
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                        Toast.makeText(User.this, "Uploaded", Toast.LENGTH_SHORT).show();
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {
                        Toast.makeText(User.this, "Failed "+e.getMessage(), Toast.LENGTH_SHORT).show();
                    }
                });
    }
}

private void chooseImage() {
    Intent intent = new Intent();
    intent.setType("image/*");
    intent.setAction(Intent.ACTION_GET_CONTENT);
    startActivityForResult(Intent.createChooser(intent, "Select Picture"), PICK_IMAGE_REQUEST);
}

protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if(requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK
            && data != null && data.getData() != null )
    {
        filePath = data.getData();
        try {
            Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), filePath);
            imageView.setImageBitmap(bitmap);

            uploadImage();
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
    }
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_user);
    imageView = findViewById(R.id.profile_image);

    loadImage();

    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

                chooseImage();
        }
    });
}

}

Please help me out for correct the code

请帮我解决问题

2 个解决方案

#1

As is told in the official firebase documentation HERE you should getDownloadURL() of your photo in order to pass it to your glide library, this way glide will show up your image

正如在官方firebase文档中所述,你应该获取你的照片的下载URL(),以便将它传递到你的滑动库,这样滑行将显示你的图像

in this line add getDownloadUrl();

在这一行添加getDownloadUrl();

    StorageReference ref = storageReference.child(retrievedName).child("images/profile_image").getDownloadUrl();

and then just call your image with glide

然后用滑动来调用你的图像

// Load the image using Glide
Glide.with(this /* context */)
        .using(new FirebaseImageLoader())
        .load(ref)
        .into(imageView);

in order to use FirebaseImageLoader() just remember to add this in your gradle

为了使用FirebaseImageLoader(),请记住在你的gradle中添加它

dependencies {
    // FirebaseUI Storage only
    compile 'com.firebaseui:firebase-ui-storage:0.6.0'
}

Also follow up THIS GitHub link on how to load an image from a StorageReference

还要关注如何从StorageReference加载图像的这个GitHub链接

Another easier way is getting that DownloadUrl and use it in glide

另一种更简单的方法是获取DownloadUrl并在滑行中使用它

ref.putFile(filePath)
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                         @SuppressWarnings("VisibleForTests") Uri downloadUrl = 
                     taskSnapshot.getDownloadUrl();
                    uploadImageUrl = downloadUrl.toString();
                Toast.makeText(getApplicationContext(), "url to your file..."+uploadImageUrl, Toast.LENGTH_SHORT).show();
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {
                        Toast.makeText(User.this, "Failed "+e.getMessage(), Toast.LENGTH_SHORT).show();
                    }
                });

uploadImageUrl is a global variable private String uploadImageUrl;

uploadImageUrl是一个全局变量private String uploadImageUrl;

And then just load that image url with glide into your imageView

然后只需将滑动的图像URL加载到imageView中

Glide.with(this /* your_context */)
    .load(uploadImageUrl)
    .centerCrop()
    .into(imageView)

#2

Finally I got the solution.

最后我得到了解决方案。

At upload part, I added the url in Realtime database

在上传部分,我在Realtime数据库中添加了url

url_db = FirebaseDatabase.getInstance().getReference().child(retrievedName).child("Url");
        StorageReference ref = FirebaseStorage.getInstance().getReference().child(retrievedName).child("images/profile_image");
        ref.putFile(filePath)
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                        @SuppressWarnings("VisibleForTests") Uri downloadUrl =
                                taskSnapshot.getDownloadUrl();
                        uploadImageUrl = downloadUrl.toString();

                        url_db.setValue(uploadImageUrl);
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {
                        Toast.makeText(User.this, "Failed " + e.getMessage(), Toast.LENGTH_SHORT).show();
                    }
                });

While loading that I used this Url from Database and used in Glide

在加载时我使用了来自数据库的这个Url并在Glide中使用

imageView = findViewById(R.id.profile_image);

    url_db = FirebaseDatabase.getInstance().getReference().child(retrievedName).child("Url");

    url_db.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {

            String url = dataSnapshot.getValue(String.class);

            if(url!= null){

                imageLoad.setVisibility(View.VISIBLE);


                Glide.with( User.this)
                        .load(url)
                        .into(imageView);

                imageLoad.setVisibility(View.INVISIBLE);

            }

        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });

Thanks for the support guys.

感谢你们的支持。