12
0

دارم سعی می‌کنم به یه تصویر استاتیک دسترسی پیدا کنم تا ازش توی خاصیت backgroundImage این‌لاین توی React استفاده کنم. متأسفانه، نتونستم راهش رو پیدا کنم.

فکر می‌کردم که اینجوری انجام میشه:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

این برای تگ‌های <img> کار می‌کنه. کسی می‌تونه تفاوت بین این دو رو توضیح بده؟

مثال:

<img src={ Background } /> خوب کار می‌کنه.

0

کرلی بریسس ها داخل خاصیت backgroundImage اشتباه هستند.

احتمالاً داری از webpack به همراه بارگذار فایل‌های تصویری استفاده می‌کنی، پس Background باید از قبل یه رشته باشه: backgroundImage: "url(" + Background + ")"

همچنین می‌تونی از الگوهای رشته‌ای ES6 به شکل زیر استفاده کنی تا همون نتیجه رو بدست بیاری:

backgroundImage: `url(${Background})`
ارسال پاسخ به سوال بالا

برای ارسال پاسخ باید وارد اکانتت بشی

اگر پاسخت شامل تکه کدی میشه، از منوی ویرایشگر پایین، تکه کدی که نوشتی رو انتخاب کن و بعد از طریق زبان کدی که نوشتی رو انتخاب کن تا کدت داخل بلاک مخصوص زبان خودش قرار بگیره و کدت خواناتر برای بقیه نشون داده بشه

اگه پاسخت رفرنسی داره، لینک رفرنس رو هم بذار تا پاسختت کاملتر و معتبر تر بشه