Question

react-360指令似乎非常简单明了：

from django.shortcuts import render
from django.http import HttpResponseRedirect
from django.urls import reverse


from .models import Category, Entry, Topic
from .forms import CategoryForm, TopicForm
# Create your views here.


def index(request):
    """The home page for Learning Logs"""
    return render(request, 'blogging_logs/index.html')


def categories(request):
    """show all categories"""
    categories = Category.objects.all()
    context = {'categories': categories}
    return render(request, 'blogging_logs/categories.html', context)


def topics(request, category_id):
    """Show all topics for a single category"""
    category = Category.objects.get(id=category_id)  # get category that was requested
    topics = category.topic_set.all()  # get all topics associated with category that was requested
    context = {'category': category, 'topics': topics}
    return render(request, 'blogging_logs/category.html', context)


def topic(request, entry_id):
    """Show entry for single topic"""
    topic = Topic.objects.get(id=entry_id)
    entries = topic.entry_set.all()
    context = {'topic': topic, 'entries': entries}
    return render(request, 'blogging_logs/topic.html', context)


def new_category(request):
    """Add a new category"""
    if request.method != 'POST':
        # No data submitted; create a blank formself.
        form = CategoryForm()
    else:
        # POST data submitted; process data
        form = CategoryForm(data=request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect(reverse('blogging_logs:categories'))

    context = {'form': form}
    return render(request, 'blogging_logs/new_category.html', context)


def new_topic(request):
    """ Add new topic to category """
    if request.method != 'POST':
        # No data submitted; create a blank formself.
        form = TopicForm()
    else:
        form = TopicForm(data=request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect(reverse('blogging_logs:topics'))

    context = {'form': form}
    return render(request, 'blogging_logs/new_topic.html', context)

但是我已经将图像文件手动上传到Google Storage，Amazon S3和Azure Blob存储。将它们公开后，它们都会完美地渲染到非react-360浏览器的img元素，但是它们都不能在react-360浏览器画布中工作。

但是“ https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&h=650&w=940”是我发现确实有效的URL，但是将同一张图片上传到存储不起作用。

即使我遇到问题时成功获得200或部分内容206结果代码，我所能看到的图像元素就是设置背景颜色，而实际图像却永远不可见。

如何在Google Cloud Storage中获取JPEG图像以渲染到react-360中的Image元素？谢谢，请：）

Answer 1

https://cloud.google.com/storage/docs/cross-origin

不允许CORS：

https://storage.cloud.google.com/[BUCKET_NAME]

允许CORS：

Answer 2

对于S3，您可能想在正在使用的存储分区上使用CORS设置，并为从中访问存储分区的站点添加例外。在这里查看文档：

https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

假设myreact360app.herokuapp.com正在访问您的存储桶，则可以将以下内容添加到存储桶CORS策略中。

<CORSRule>
    <AllowedOrigin>https://myreact360app.herokuapp.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

React-360图像URI不可见

2 个答案: