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

Question

我正在尝试使用 Glide & Firebase 上传和显示个人资料图片。上传部分成功运行。但是，如果我尝试从数据库加载该图像，其显示 blank.My 的动机是在用户输入 activity 一次时加载 profile_image，他可以点击现有图像并更改它为了他的愿望。

我的代码

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();
            }
        });
    }

}

Answer 1

正如官方 firebase 文档中所述 HERE 你应该 getDownloadURL() 你的照片才能将它传递到你的 glide 库，这样 glide 就会显示你的图像

在这一行添加getDownloadUrl();

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

然后用 glide

调用你的图像

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

为了使用 FirebaseImageLoader()，请记住将其添加到您的 gradle

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

同时跟进 THIS GitHub link 如何从 StorageReference

加载图像

另一种更简单的方法是获取 DownloadUrl 并在 glide

中使用它

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 是全局变量private String uploadImageUrl;

然后只需加载该图像 url 并滑入您的 imageView

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

Answer 2

终于找到解决办法了

在上传部分，我在实时数据库中添加了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();
                    }
                });

加载时我从数据库中使用了这个 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) {

        }
    });

感谢大家的支持

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

Storing and Displaying Image using Glide & FireBase android

android

database

firebase

firebase-storage

android-glide