在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中得到的就是你在网站中得到的”,但是前端世界似乎又让我失望了。
1条答案
按热度按时间gstyhher1#
我用的是
react-native
。这就是原因这是一个模块主要是移动的设备。我放了一个代替,现在它工作了。