묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
flask, react 로 개발한 웹앱을 모바일로 접속시 이미지가 안나오는 오류
안녕하세요. 저는 flask와 react를 활용해서 프로젝트를 진행하고 있는 대학생입니다.flask는 5000번, 리액트는 3000번 포트를 사용하고리액트에서 웹앱의 배경화면 이미지를 flask의 라우팅 함수를 통해 받아오는 중입니다. localhost:포트번호 에 접속할 때는 문제가 없고, 같은 와이파이에서 다른 노트북으로 아이피:포트 로 접속해봐도 문제가 없습니다.다만, 모바일에서 아이피:포트 에 접속할 때는 이미지가 로딩되지 않는 문제가 있습니다.이미지 외에 네비게이션은 잘 나오고 기타 동작은 문제가 없는 것으로 확인했습니다.react에서 로컬 디렉토리에 있는 이미지를 랜더링할 땐 모바일에서도 이미지가 잘 나옵니다.flask에서 받아온 이미지를 랜더링할 때만 모바일 접속시 이미지가 안나옵니다. 아이패드로 접속시 화면맥에서 로컬호스트 접속시 화면3. 코드@app.route('/map-image/') def serve_map_image(): return send_from_directory('static', 'map.png')리액트파일에서 아래처럼 flask서버를 통해 받아옵니다.const imageUrl = "http://localhost:5000/map-image"; 관련 경험이 있으신 분들의 많은 도움과 조언 부탁드립니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
이미지를 따로 받는 이유가 있을까요??
안녕하세요. 설명해주신 이미지 업로드 프로세스가 조금 비효율적이라는 생각이 들어서 질문드립니다. 설명해주신 프로세스는 브라우저에서 게시글을 등록할 때 이미지를 선택하면 백엔드로 이미지를 보내고, 백엔드에서 클라우드로 이미지를 업로드 한 후, 주소를 받아서 다시 브라우저로 보내주는 방식입니다.그런데 브라우저에서 이미지를 취소하거나, 다른거로 변경하게되면 이전에 선택해서 클라우드에 올렸던 이미지는 필요가 없어지고, 앞서 했던 행동들이 무의미 해져서 불필요한 통신이라고 생각이 듭니다. 그래서 이미지를 선택했을 때가 아닌, 글등록을 눌렀을 때 선택한 이미지도 같이 백엔드로 보내주고, 백엔드에서는 클라우드로 이미지를 업로드한 후 받은 url을 바로 DB에 저장하면 브라우저로 다시 url을 보내지 않아 통신횟수도 줄게되어 더 좋을것 같은데, 강의에서 처럼 이미지를 먼저 받아서 처리하는 이유가 있을까요??
-
해결됨HTML5 & CSS3 기초 문법 올인원
img와 video태그를 붙일 때
안녕하세요. 이미지와 비디오 src를 깨짐없이 붙이고 싶은데, 링크 주소를 복사하거나 폴더에 저장할 때 링크 주소를 그대로 붙여야 하나요? 제가 지금까지 끝에 jpg나 jpeg를 붙인채로 살짝 수정했는데도 확인하면 깨져있습니다. 무슨 문제일까요?
-
미해결따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
도커 작동 관련 질문
안녕하세요 도커 작동 순서 강의 내용에서 궁금해서 질문드립니다.도커 작동 순서가도커 클라이언트에 명령어 입력 후 도커 서버로 보내고 도커 서버에서 컨테이너를 위한 이미지가 이미 캐쉬가 되어 있는지 확인 한 후없으면 도커 허브에서 다운 받아온다고 하셨는데 도커 허브에도 해당이미지가 없는경우 이미지를 만들어야 하나요? 만약 이미지를 만들면 로컬에서만 사용하게 되는건가요? 아님 허브에 올리는건가요?그리고 이미지를 불러온다고 해도 그 세부 구성은 때에따라 다를 수 있을것 같은데 이미지를 불러와서 커스터마이징 작업을 하나요?그리고 살짝 바보같은 질문일 수 있는데 하나의 컨테이너 안에 여러개 이미지는 안되고, 하나의 이미지로 여러개의 컨테이너를 생성하는것만 되는거죠? 컨테이너를 하나의 OS로 생각하는게 맞을까요?
-
미해결남박사의 파이썬으로 실전 웹사이트 만들기
글 작성 폼에 HTML 에디터 기능 추가하기 이미지 저장 오류..ㅠ
남박사님 계속 질문해서 죄송합니다..ㅠ 하다보니까 계속 오류가 나네요.... 이미지 업로드 관련해서 ajax 부분에서 오류가 나는것은 영상을 따라 하면서 해봐도 계속 같은 오류가 나와서 답답해서 질문드립니다. - 오류1 - 영상대로 수정하고 적용해서 똑같은 오류가 나오더라구요.. 그래서 이미지 업로드창 눌러서 해봤는데 비슷한 오류가 나옵니다. -오류2- -오류3- - 코드- -write.html- {% extends "main.html" %} {% block contents %} <script> $(document).ready(function() { $("#summernote").summernote({ height: 300, minHeight: null, maxHeight: null, lang: "ko-KR", popover: { image:[], link:[], air:[] }, callbacks: { onImageUpload: function(image) { for(var i = 0; i < image.length; i++) { uploadImage(image[i]); } } } }); }); function uploadImage(image) { var data = new FormData(); data.append("image", image); $.ajax({ url: "{{url_for('board.upload_image')}}", cache: false, contentType: false, processData: false, data: data, type:"post", success: function(url) { var image = $("<img>").attr("src",url).css('max-width', "900px"); $("#summernote").summernote("insertNode",image[0]); }, error: function(data) { console.log(data); alert(data); } }); } </script> <script> function checkForm() { if ($.trim($("#title").val()) == "") { alert("제목을 입력하세요"); $("#title").focus(); return false; } if ($.trim($("#summernote").val()) == "") { alert("내용을 입력하세요"); $("#summernote").focus(); return false; } } </script> <div style="padding: 50px 50px 50px 50px;"> <form name="form" method="post" action="{{url_for('board.board_write')}}" onsubmit="return checkForm()"> <div class="form-group"> <label for="name">작성자</label> <input class="form-control" id="name" type="text" name="name" value="{{session['name']}}" readonly> </div> <div class="form-group"> <label for="title">제목</label> <input class="form-control" type="text" name="title" id="title" placeholder="제목을 입력하세요"/> </div> <div class="form-group"> <label for="contents">내용</label> <textarea rows="8" class="form-control" type="text" name="contents" id="summernote" placeholder="내용을 입력하세요"></textarea> </div> <div class="text-center"><input class="btn btn-primary" type="submit" value="작성하기"></div> </form> </div> {% endblock %} --------------------------------------------------------------------------------------- -viev.html- {% extends "main.html" %} {% block contents %} <div style="padding: 50px 50px 50px 50px;"> <table class="table table-bordered"> <tbody> <tr> <td colspan="2">{{result.title}}</td> </tr> <tr> <td>{{result.name}}</td> <td class="text-right">{{result.pubdate|formatdatetime}}</td> </tr> <tr> <td colspan="2"><div style="min-height: 200px;"></div>{% autoescape false %}{{result.contents}}{% endautoescape %}</td> </tr> </tbody> </table> <a class="btn btn-primary" href="{{url_for('board.lists', page=page, search=search, keyword=keyword)}}">리스트</a> {% if session["id"] == result.writer_id %} <a class="btn btn-danger float-right ml-2" href="{{url_for('board.board_delete', idx=result.id)}}">글삭제</a> <a class="btn btn-warning float-right" href="{{url_for('board.board_edit', idx=result.id)}}">글수정</a> {% endif %} </div> {% endblock %} --------------------------------------------------------------------------------------------------- -main.html- <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{title}}</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <!-- include summernote css/js --> <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script> <script> function validateEmail(email) { var pattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/; return pattern.test(email); } </script> {% with messages = get_flashed_messages() %} {% if messages %} <script> alert('{{messages[-1]}}'); </script> {% endif %} {% endwith %} </head> <body> <div class="containter"> {% include "menu.html" %} {% block contents %} {% endblock %} </div> </body> </html> -------------------------------------------------------------------------------------------------- -board.py- from main import * from flask import Blueprint, send_from_directory from flask import send_from_directory bluerprint = Blueprint("board", __name__, url_prefix="/board") @bluerprint.route("/upload_image", methods=["POST"]) def upload_image(): if request.method == "POST": file = request.files["image"] if file and allowed_file(file.filename): filename = "{}.jpg".format(rand_generator()) savefilepath = os.path.join(app.config["BOARD_IMAGE_PATH"], filename) file.save(savefilepath) return url_for("board.board_images", filename=filename) @bluerprint.route("/images/<filename>") def board_images(filename): return send_from_directory(app.config["BOARD_IMAGE_PATH"], filename) @bluerprint.route("/list") def lists(): # 페이지 값 (값이 없는 경우 기본값는 1) page = request.args.get("page", 1, type=int) # 한페이지당 몇개의 게시물을 출력할지 limit = request.args.get("limit", 5, type=int) search = request.args.get("search", -1, type=int) keyword = request.args.get("keyword", "", type=str) # 최종적으로 완성된 쿼리를 만들 변수 query = {} # 검색어 상태를 추가할 리스트 변수 search_list = [] if search == 0: search_list.append({"title": {"$regex": keyword}}) elif search == 1: search_list.append({"contents": {"$regex": keyword}}) elif search == 2: search_list.append({"title": {"$regex": keyword}}) search_list.append({"contents": {"$regex": keyword}}) elif search == 3: search_list.append({"name": {"$regex": keyword}}) # 검색 대상이 한개라도 존재할 경우 query 변수에 $or 리스트를 쿼리 합니다. if len(search_list) > 0: query = {"$or": search_list} print(query) board = mongo.db.board datas = board.find({}).skip( (page - 1) * limit).limit(limit).sort("pubdate", -1) # 게시물의 총 갯수 tot_count = board.count_documents({}) # 마지막 페이지의 수를 구한다. last_page_num = math.ceil(tot_count / limit) # 페이지 블럭을 5개씩 표기 block_size = 5 # 현재 블럭의 위치 block_num = int((page - 1) / block_size) # 블럭의 시작 위치 block_start = int((block_size * block_num) + 1) # 블럭의 끝 위치 block_last = math.ceil(block_start + (block_size - 1)) return render_template( "list.html", datas=list(datas), limit=limit, page=page, block_start=block_start, block_last=block_last, last_page_num=last_page_num, search=search, keyword=keyword, title="게시판 리스트") @bluerprint.route("/view/<idx>") @login_required def board_view(idx): # idx = request.args.get("idx") if idx is not None: page = request.args.get("page") search = request.args.get("search") keyword = request.args.get("keyword") board = mongo.db.board # data = board.find_one({"_id": ObjectId(idx)}) data = board.find_one_and_update({"_id": ObjectId(idx)}, { "$inc": {"view": 1}}, return_document=True) if data is not None: result = { "id": data.get("_id"), "name": data.get("name"), "title": data.get("title"), "contents": data.get("contents"), "pubdate": data.get("pubdate"), "view": data.get("view"), "writer_id": data.get("writer_id", "") } return render_template( "view.html", result=result, page=page, search=search, keyword=keyword, title="글 상세보기") return abort(404) @bluerprint.route("/write", methods=["GET", "POST"]) def board_write(): if session.get("id") is None: return redirect(url_for("member.member_login")) if request.method == "POST": name = request.form.get("name") title = request.form.get("title") contents = request.form.get("contents") print(name, title, contents) current_utc_time = round(datetime.utcnow().timestamp() * 1000) board = mongo.db.board post = { "name": name, "title": title, "contents": contents, "pubdate": current_utc_time, "writer_id": session.get("id"), "view": 0, } x = board.insert_one(post) print(x.inserted_id) return redirect(url_for("board.board_view", idx=x.inserted_id)) else: return render_template("write.html", title="글 작성") @bluerprint.route("/edit/<idx>", methods=["GET", "POST"]) def board_edit(idx): if request.method == "GET": board = mongo.db.board data = board.find_one({"_id": ObjectId(idx)}) if data is None: flash("해당 게시물이 존재하지 않습니다.") return redirect(url_for("board.lists")) else: if session.get("id") == data.get("writer_id"): return render_template("edit.html", data=data, title="글 수정") else: flash("글 수정 권한이 없습니다.") return redirect(url_for("board.lists")) else: title = request.form.get("title") contains = request.form.get("contents") board = mongo.db.board data = board.find_one({"_id": ObjectId(idx)}) if session.get("id") == data.get("writer_id"): board.update_one({"_id": ObjectId(idx)}, { "$set": { "title": title, "contents": contains, } }) flash("수정 되었습니다.") return redirect(url_for("board.board_view", idx=idx)) else: flash("글 수정 권한이 없습니다.") return redirect(url_for("board.lists")) @bluerprint.route("/delete/<idx>") def board_delete(idx): board = mongo.db.board data = board.find_one({"_id": ObjectId(idx)}) if data.get("writer_id") == session.get("id"): board.delete_one({"_id": ObjectId(idx)}) flash("삭제 되었습니다.") else: flash("삭제 권한이 없습니다.") return redirect(url_for("board.lists")) --------------------------------------------------------------------------------- -__init__.py- from flask import Flask from flask import request from flask import render_template from flask_pymongo import PyMongo from bson.objectid import ObjectId from datetime import datetime, timedelta from flask import abort from flask import redirect from flask import url_for from flask import flash from flask import session import math import time import os app = Flask(__name__) app.config["MONGO_URI"] = "mongodb://localhost:27017/myweb" app.config["SECRET_KEY"] = "abcd" app.config["PERMANENT_SESSION_LIFETIME"] = timedelta(minutes=30) mongo = PyMongo(app) BOARD_IMAGE_PATH = "C:\\python\\images" ALLOWED_EXTENSIONS =set(["txt", "pdf", "png", "jpg", "jpeg", "gif"]) app.config["BOARD_IMAGE_PATH"] = BOARD_IMAGE_PATH app.config["MAX-CONTENT_LENGTH"] = 15 * 1024 * 1024 if not os.path.exists(app.config["BOARD_IMAGE_PATH"]): os.mkdir(app.config["BOARD_IMAGE_PATH"]) # 아래의 파일들에서 main 의 app 에 접근을 해야하니 # 아래 import 위에 app 가 선언되어야 합니다. from .common import login_required, allowed_file, rand_generator from .filter import format_datetime # member, board 에서 login_required, format_datetime 을 사용하니까 # 당연히 member 와 board 가 위의 import 보다 먼저 나와선 안됩니다. from . import member from . import board app.register_blueprint(board.bluerprint) app.register_blueprint(member.bluerprint)
-
미해결애플 웹사이트 인터랙션 클론!
이미지 크기 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님혹시 강의에서 사용하는 이미지 크기는 1920 * 1080의 이미지인데 1920 * 1080 의 이미지보다 작거나 큰 이미지를 사용할려면 어느 부분을 고쳐줘야하나요? html 파일의 canvas를 1920 * 1000 으로 하고 이미지의 크기를 1920 * 1000으로 수정해서 저장하여야하나요..?
-
미해결
이미지데이터 학습 후 평가 시 그래프가 튀는 경우와 정확도 산정
안녕하세요 이미지 데이터를 가지고 학습 및 평가를 하고 있습니다. 모델 별(ResNet, Inception 등) 전이학습을 하고 있고 데이터수는 Train(약 2000장), Valid(약 250장), Test(약 250장) 정도로 구성되어 있습니다. 이 때 질문을 드리고 싶은 것이 몇가지 있는데 초보라 모르는 것이 많아 문의를 드립니다. 많은 조언 부탁 드립니다. 1. 다음과 같이 Valid Accuracy나 Loss 가 위아래 편차가 굉장히 심한데 어떤것이 문제이며 무엇을 바꿔야 하는지 궁금합니다. 2. 위와 같은 경우에 Accuracy를 몇이라고 해야 하는 것일까요? 평균 or 최대값 or 최소값? 3. Keras(tensorflow)를 사용하여 수행중인데 Train, Valid 등은 API내에 예제가 많이 있는데 Test(Evaluation?)에 관한 코드는 잘 없는데, 보통 Valid 까지 수행하나요 아니면 Evaluation 까지 진행해야 하는 것일까요? 4. Keras API를 사용해서 전이학습을 진행중인데 아래와 같이 conv_base에서 include_top=False, conv_base.trainable=False로 해도 전이학습의 효과가 있는 것인지, conv_base의 특정 Layer 부터 동결 혹은 학습을 할 수 있는 방법이 있는 것인지 궁금합니다. 감사합니다.
-
해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이미지가 안들어가져요.....
/* Google Web Fonts CDN */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); body{ font-family: 'Noto Sans KR' ,sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; background-color: #eee; font-size: 15px; } a{ text-decoration: none; color: #000; } .container{} header{ border-bottom: 1px solid lightgray; background-color: #fff; height: 60px; text-align: center; padding: 13px; box-sizing: border-box; } section{ border: 1px solid red; height: calc(100vh - 60px); position: relative; } .login{ border: 1px solid red; width: 360px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .login-type{} .login-type h1{ margin: 0; font-size: 38px; text-align: center; } .login-type a{ border: 1px solid red; display: block; text-align: center; height: 50px; line-height: 50px; border-radius: 3px; margin-bottom: 10px; font-size: 18px; color: #fff; } .login-type a:nth-of-type(1){ background-color: #fff; color: #222; /* background: url(images/logo-mobile.png); */ background-image: url(images/logo-mobile.png); } .login-type a:nth-of-type(2){ background-color: #898c9b; } .login-type a:nth-of-type(3){ background-color: #11ce00; } .login-type a:nth-of-type(4){ background-color: #0076fe; } .login-type a:nth-of-type(5){ background-color: #00c026; } .login-type span{ } .login-footer{} [part3]로그인 화면 UI 디자인(css디자인-버튼 디자인 및 체크박스와 label)에서 문제가 생겼습니다.동영상 5:14초에 백그라운드 이미지를 넣을 때 이미지가 안들어가네요 ㅠㅠ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <link rel="icon" href="images/favicon.png"> <title>밴드 로그인 폼</title> </head> <body> <div class="container"> <header> <a href="#none"> <img src="images/logo-band.png"> </a> </header> <section> <div class="login"> <div class="login-type"> <h1>로그인</h1> <a class="btn" href="#none">휴대폰 번호로 로그인</a> <span class="or-text">또는</span> <a class="btn" href="#none">이메일로 로그인</a> <a class="btn" href="#none">네이버로 로그인</a> <a class="btn" href="#none">페이스북으로 로그인</a> <a class="btn" href="#none">라인으로 로그인</a> </div> <div class="login-footer"> <input type="checkbox">로그인 상태 유지 <p> 밴드가 처음이신가요<a href="#none">회원가입</a> </p> </div> </div> </section> </div> </body> </html>
-
미해결프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
이미지 preloading 관련 질문
안녕하세요~! 강의 잘 듣고있습니다 ㅎㅎㅎ 다름이 아니라 Image preloading 강의 내용 중 이미지는 자바스크립트의 Image 객체를 사용하여 preloading 할 수 있고 img.src = '이미지 주소'; 를 호출할 때 마다 매번 네트워크 요청을 한다고 하셨는데 크롬에서 테스트 해봤을 땐 여러번 호출해도 네트워크 요청을 한 번 하더라구요, 그래서 크롬이 업데이트 됨에 따라 해당 부분을 자동으로 최적화 시켜서 그럴수도 있겠다 라고 추측을 해봤는데 이런 이유가 맞을까요?! 제가 사용하고 있는 크롬의 버전은 다음과 같습니다~! 버전 96.0.4664.110(공식 빌드) (64비트)
-
미해결파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)
Html 강의 중 이미지 파일 삽입 시 엑박
크롤링 웹기본 - 크롤링을 위한 지식: 웹구조와 HTML 이해하기3 3분 40초 코드는 이렇게 썻는데 이미지는 엑박만 뜹니다 ㅠ 그리고 다른 강의 수업자료(아래) 주피터노트북으로 열때도 이미지가 엑박으로 보이던 부분이있었습니다. 연관이 있을거 같은데 이미지를 이미지로 못받는거같은데 해결방법이 있을까요?
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
view 실습중입니다. 인텔리제이에서 실행하면 이미지가 보이는데 터미널에서 실행하면 이미지가 보이지 않습니다
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예)[질문 내용]여기에 질문 내용을 남겨주세요. 오늘 들은 강의에 나온 view와 addAttribute를 실습하고 있었습니다. static/tiles/에 있는 이미지를 출력하는 프로그램을 작성하고 있었는데 인텔리제이에서만 정상 동작하고 터미널 빌드시 의도치 않은 결과가 발생하였습니다. 인텔리제이에서 빌드시 1번, 3번은 이미지가 나오며 2번은 나오지 않습니다. 기본 경로가 static이니 예상된 결과대로 작동한 것입니다. 터미널에서 빌드시 아래와 같이 1,2,3번 모두 이미지가 나오지 않습니다 1. 인텔리제이 빌드와 터미널 빌드시 경로가 달라지나요? 2. 터미널 빌드를 통해 jar 파일로 프로그램을 실행한다면 static/tiles/aatrox_0.jpg 파일을 보려면 경로를 어떻게 잡아야하나요? 3. thymeleaf실행 시 html파일이 위치한 경로를 출력하는 방법이 있다면 알려주시면 감사하겠습니다.
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
DB에 없는 이미지 출력안하도록
제가 프로젝트를 노트북과 데스크탑으로 왔다갔다하다보니 upload에 저장되지 않은 이미지들이 있네요. DB에는 이미지 네임이저장되다보니 DB에 없는 이미지가 기본 default이미지로 출력되고있습니다. (default이미지=> 아무것도 없는 이미지) 이럴경우 어떻게 처리해야할까요? 아예 안보여주고 싶은데 DB에 데이터를 지워야하기도 애매하고 react에서 이미지데이터가 없는경우 안보여지게 할 수 있을까요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의 3:10 background-image: url()
백그라운드 이미지 url을 입력을 안해서 인지, 테스트 안녕하세요 글자가 뜨지 않습니다. <!--메인 이미지 섹션--> <section class="main"> <div class="main-container"></div> <div class="title-container"></div> <div class="title">테스트</div> <div class="message">안녕하세요</div> ============================== .main{ height: 360px; /* background-image:url(); */ z-index: 1; } .main-container{ width: 100%; height: 100%; background-color: cornflowerblue; opacity: 0.8; z-index: 2; margin-top: 60px; } .title-container{ padding-top: 100px; padding-bottom: 100px; } .title{ font-size: 2rem; font-weight:bold; color:#fff; margin-bottom: 0.8rem; } .message{ font-size: 1.4rem; font-weight: normal ; color: #fff; } 그리고 url을 저작권 문제로 스스로 구해야한다고 하셨는데 제 개인이미지 url적다보니 안됩니다. 어떻게 하면 강사님처럼 저의 이미지 url을 http://이렇게 만들수 있나요?
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
이미지 링크가 깨집니다
이미지가 ?로 표시되는데 이유가 뭔지 모르겠네요
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
리액트에서 img 태그 사용 시 src 속성에 대하여
안녕하세요, 그랩님! 그랩님 강의를 보고 그랩마켓 적용을 학습했습니다. 그 후에 자체적으로 복습을 위해 psg 축구팀 소개 페이지를 클론코딩 중인데요, 이미지 태그 삽입 중 src 속성에 경로 표시에 있어서 의문점이 있어 질의드립니다. (삽입하려는 이미지 모두 public 폴더에 정상적으로 있습니다.) 1. public/logo/logo-psg.png : 엑스박스 처리. 2. logo/logo-psg.png : 정상 삽입. 3. 절대경로 : 엑스박스 처리. 1, 3의 경우에는 왜 이미지가 정상적으로 삽입되지 못하는지 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글의 이미지 수정 질문입니다.
안녕하세요. 제로초님의 풀스택 강의를 공부하고있는 프론트엔드 개발자입니다. 해당 강의에서 질문이 있어서 게시글 올립니다! 해당 강의 숙제로 주신 텍스트와 이미지 수정을 진행하다가 sequelize association쪽에 질문이 생겼습니다. 글 수정시 텍스트와 이미지를 추가하고 수정하는건 잘 작동하는데 이미지를 제거하고 수정하는거는 잘 동작하지 않습니다. 제가 보기에는 네모친 곳이 문제인거같은데 EX1) 현재 A게시글에 이미지가 3개 들어있는데 제가 그 중 이미지를 1개 추가하여 4개의 이미지로 통신하면 1번 네모에서 그 게시글의 이미지를 길이가 4인 배열로 바꾸고 2번네모에서 else문으로 접근해 그 이미지를db에 추가해주고 원래 {src:...}만 있던 이미지 데이터를 {src:..,upDateat:..,id:..}인 완전한 데이터로 변경한다. 가 맞을까요 ? EX2) 현재 B게시글에 이미지가 3개 들어있는데 제가 그 중 이미지를 1개 제거하여 2개의 이미지로 통신하면 후에 과정은 감이 도통 잡히지 않습니다. 2번네모의 addImages가 아닌 removeImages나 upDateImages가 있어 사용자가 이미지를 추가했는지 제거했는지 판별해서 조건부로 한다거나 등등 바쁘시겠지만 혹시 .. 질문 부탁드려도 될까요?
-
미해결
Colab에서 불러온 이미지 데이터셋을 csv파일로 만드는 방법이 궁금합니다Colab에서 불러온 이미지 데이터셋을 csv파일로 만드는 방법이 궁금합니다
colab과 구글 드라이브를 연동하는것까지는 성공했지만 드라이브 안에 들어있는 수만장의 이미지들을 csv파일로 라벨링하는 방법을 모르겠습니다 훈련 데이터셋은 /content/gdrive/My Drive/Dataset/fer/archvie/train 에 시험 데이터셋은 /content/gdrive/My Drive/Dataset/fer/archive/test 에 각각 저장되어 있습니다. train과 test에는 각각 angry, disgust, fear, happy 같은 이름을 가진 7가지 하위 폴더가 있고 그러한 하위 폴더에 폴더명에 맞는 이미지들이 있습니다. 이해를 돕기 위해 pc에서의 디렉토리 사진을 첨부합니다(윗 글에 써진 디렉토리는 구글 드라이브 colab에 사용하는것) 이런 이미지 데이터셋을 픽셀값과 상위 디렉토리 파일명으로 구성된 csv 파일로 만들고 싶은데 독학과 검색만으로는 해답이 나오지않아 이렇게 질문을 남겨봅니다. 간단한 조언도 감사히 받겠고 문법이나 코드같은 자료를 알려주신다면 더욱 감사히 받겠습니다.
-
미해결하루만에 만드는 깃허브 블로그
[3강 커스텀하기 질문]사이드바 및 웹아이콘 질문
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. 1. 사이드바 질문 위 사진 처럼 강사님의 자료에는 사진 배치가 오른 쪽이고 아래 글과 간격이 짧게 나오는데 강사님 코드 복붙하면 사진이 가운데로 오고 blog 글과 사이 간격도 큽니다. 오른쪽 배치와 아래 간격 짧게 조절하는 방법이 궁금합니다. 2. 아이콘 질문 아이콘 폴더 모두 변경 기존파일 삭제하고 제가 원하는 아이콘으로 변경했는데 따로 코드도 바꿔야하는 부분이 있나요? 아이콘 바꾸고 싶어요 ㅠㅠ
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
이미지나 동영상 예제
저번에도 말씀드렸지만 이미지나 동영상 예제 올려주실 수 있나요? 물론 몽고DB 강의에 범주를 넘어가는것은 알겠으나, 아예 없다고는 생각하지 않아서요. 애매하게 중간에 걸친 것 같은데 혹시 예제를 올려주실 수 있나해서요? 아니면 참고할만한 사이트 부탁드립니다. 늘 친절한 답변 주셔서 감사합니다. ps: 앗!!!! 미니 강의 올려주신다 하셨네요. 그럼 강의도 좋은데 실무에서 사용하고 있는 저장 관련 모듈 사이트 알려주시면 감사하겠습니다. ^^ 찾다가 보니 아래와 같은 자료가 있어서 남깁니다. 그런데 제가 궁금한게 Streams 를 많이 사용하나요? Multer는 생각보다 안 사용하는 것 같네요. 생각해보니 mongodb 보단 nodejs범주인것 같긴하네요. 그래도 강사님은 어떤걸 더 추천 하시나요? multer 보니깐 데이터 저장된 파일이 이상한 문자로 나오던데 이 파일을 저장하는건 괜찮은 방법 같습니다만 .... 실무에서 어떤걸 쓰는지 궁금하네요. 제일 궁금한건 Streams인데 범주를 넘어서면 굳이 대답안해주셔됩니다.
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
몽고디비 이미지
안녕하세요. 또 궁금한점이 있어 문의드려요. 이미지 저장하고 있는데요. 저번에 말씀하신것처럼 디비에 이미지를 직접저장하지 않는다고 하셨는데 나중에 디비를 통해 찾고 싶으면 해당 파일이름이나 인덱스? 같은걸 저장 해놓았다가 이미지 파일 불러오면 될까요? 이미지 저장까지는 어찌어찌했는데 관리를 디비로 해야될것 같은데 너무 막연하네요.