Django+DjangoRestFramework+React(TS)：React-Image组件显示我的图像大小为1295 x 0

在Django中，我有Group，Class，Model和Product作为模型。它们位于组{类{型号{产品}}}的层次结构中。所以我做了下拉菜单，它的工作原理如下：

Group Checkbox
  |-Inner Classes of Selected Group
    |-Inner Models of Selected Class
      |-Inner Products of Selected Model
  (<Image> element here)

Product models有一个image字段，它从response.json成功返回。
我可以打开图像文件，例如：http：//localhost：8000/media/images/p1111.png。它的宽度小于1295 px，高度大于0 px，ofc。

但在网站上它不显示。*

然后打开Chrome DevTools。组件在那里，在组件的源代码中和都在那里，但图像的大小显示为1295 x 0。我打开图片的网址，它的smth一样，256 x256。我可以（当然）使用CSS使图像宽度为500 x500，但是如果用户输入一个具有不同图像比例和大小的图像呢？这将使它看起来更糟或使图像显示部分，所以这两种可能性都是坏的。那么，我可以通过改变React部分来解决这个问题吗？或者我会写一个函数到Django部分？
index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: «they even banned shortened urls in TSX COMMMANDS? WTH???»
reportWebVitals();

App.tsx:

import React from "react";
import { Group, Class, Model, Product } from "./components/Group";
import './App.css';

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <br/>
        <span className="header">The Main Page</span>
        <br/><br/>
        <Group />
        <Class />
        <Model />
        <Product />
      </div>
    </div>
  );
}

export default App;

components/Group.tsx：

import React,{useState,useEffect} from "react";
import ReactDOM from "react-dom"
import {createRoot} from "react-dom/client"
import Select from "react-select";
import {Image} from "react-native"

let GROUP:any=null
let CLASS:any=null
let MODEL:any=null

export function Group(props: {}){
    const [ groups, setGropus ] = useState<any[]>([]);
    const [ groupsel, setGroupSel ] = useState("0")
    GROUP=groupsel
    const serviceUrl = 'http://localhost:8000/app/groups/';

    let groupopt:any[]=[]
    groups.map((value:any)=>{
      groupopt.push({value:value.id,label:value.groupName})
    })

    useEffect(()=>{
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("Authorization", "Basic X19tZF9fOjE1OTk1MW15");

        var urlencoded = new URLSearchParams();
        urlencoded.append("groupName", "Sample");

        var requestOptions:RequestInit = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };

        fetch(serviceUrl, requestOptions)
          .then(response => response.json())
          .then(result => setGropus(result))
          .catch(error => console.log('error', error));
    }, [])
    /*
    return (
        <select id="group" onChange={reloadAll}>
          {
            groups.map((value:any) => {
                return (
                    <option value={value.id} key={value.id}>
                        {value.groupName}
                    </option>
                )
            })
          }
        </select>
    )
    */
   return (
    <Select id="group" defaultValue={groupopt[0]} options={groupopt} onChange={(event:any)=>{setGroupSel(event?.value);}}></Select>
   )
}

export function Class(props: {}){
    const [ classes, setClasses ] = useState<any[]>([]);
    const [ classsel, setClassSel ] = useState("0");
    const serviceUrl = 'http://localhost:8000/app/groups/'+GROUP+'/classes/';
    CLASS=classsel
    //console.log(GROUP)

    let classopt:any[]=[]
    classes.map((value:any)=>{
      classopt.push({value:value.id,label:value.className})
    })

    useEffect(()=>{
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("Authorization", "Basic X19tZF9fOjE1OTk1MW15");

        var urlencoded = new URLSearchParams();
        urlencoded.append("className", "Sample");

        var requestOptions:RequestInit = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };

        fetch(serviceUrl, requestOptions)
          .then(response => response.json())
          .then(result => setClasses(result))
          .catch(error => console.log('error', error));
    }, [classes,classopt,classsel,classopt])
    /*
    return (
        <select id="class">
          {
            classes.map((value:any) => {
                return (
                    <option value={value.id} key={value.id}>
                        {value.className}
                    </option>
                )
            })
          }
        </select>
    )
    */
    return (
      <Select id="class" defaultValue={classopt[0]} options={classopt} onChange={(event:any)=>{setClassSel(event.value);}}></Select>
    )
}

export function Model(props: {}){
    const [ models, setModels ] = useState<any[]>([]);
    const [ modelsel, setModelSel ] = useState("0");
    const serviceUrl = 'http://localhost:8000/app/classes/'+CLASS+"/models/";
    MODEL=modelsel

    let modelopt:any[]=[]
    models.map((value:any)=>{
      modelopt.push({value:value.id,label:value.modelName})
    })

    useEffect(()=>{
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("Authorization", "Basic X19tZF9fOjE1OTk1MW15");

        var urlencoded = new URLSearchParams();
        urlencoded.append("modelName", "Sample");

        var requestOptions:RequestInit = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };

        fetch(serviceUrl, requestOptions)
          .then(response => response.json())
          .then(result => setModels(result))
          .catch(error => console.log('error', error));
    }, [models,modelopt,modelsel,modelopt])
    /*
    return (
        <select id="model">
          {
            models.map((value:any) => {
                return (
                    <option value={value.id} key={value.id}>
                        {value.modelName}
                    </option>
                )
            })
          }
        </select>
    )
    */
    return (
      <Select id="model" defaultValue={modelopt[0]} options={modelopt} onChange={(event)=>{setModelSel(event?.value);}}></Select>
    )
}

export function Product(props: {}){
    const [ products, setProducts ] = useState<any[]>([]);
    const [ productsel, setProductSel ] = useState("0");
    const [ productimg, setProductImg ] = useState("http://localhost:8000/media/images/p1111.png");
    const serviceUrl = 'http://localhost:8000/app/models/'+MODEL+'/products/';

    let productopt:any[]=[]
    products.map((value:any)=>{
      productopt.push({value:value.id,label:value.productName,trustedImg:value.trustedImg})
    })

    useEffect(()=>{
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("Authorization", "Basic X19tZF9fOjE1OTk1MW15");

        var urlencoded = new URLSearchParams();
        urlencoded.append("productName", "Sample");

        var requestOptions:RequestInit = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };

        fetch(serviceUrl, requestOptions)
          .then(response => response.json())
          .then(result => setProducts(result))
          .catch(error => console.log('error', error));
    }, [products,productopt,productsel,productimg])
    /*
    return (
        <select id="product">
          {
            products.map((value:any) => {
                return (
                    <option value={value.id} key={value.id}>
                        {value.productName}
                    </option>
                )
            })
          }
        </select>
    )
    */
    return (
      <>
        <Select id="product" defaultValue={productopt[0]} options={productopt} onChange={(event)=>{setProductSel(event?.value);setProductImg("http://localhost:8000"+event?.trustedImg)}}></Select>
        <Image id="image" source={{uri:productimg}} style={{width:"500px",height:"500px"}}/>
      </>
    )
}

/*
function reloadAll(){
  document.getElementById("group")?.remove()
  document.getElementById("class")?.remove()
  document.getElementById("model")?.remove()
  document.getElementById("product")?.remove()
  let root:any=createRoot(document.getElementsByTagName("header")[0])
  root.render(<Group/>)
  root.render(<Class/>)
  root.render(<Model/>)
  root.render(<Product/>)
}
*/

我尝试了，但它不重新加载图像，所以我现在使用从react-image。我尝试了width：500 px，height：500 px，但我们都知道这是临时的，如果用户添加另一个产品对象的图像将无法工作。
所以是的。我想“你在URL中得到的就是你在网站中得到的”，但是前端世界似乎又让我失望了。

Django+DjangoRestFramework+React(TS)：React-Image组件显示我的图像大小为1295 x 0

1条答案

相关问题

热门标签

最新问答