اذهب إلى المحتوى
  • 0

عرض الصورة في React باستخدام webpack

محمد لارافيل

السؤال

أحاول عرض الصور في تطبيق React الخاص بي ، لكنني أحصل على

failed to load resource..404 not found

كما هو مذكور في ملف App.js ، لا يعمل المسار النسبي ولكن استيراد الصورة يعمل. أريد استخدام المسارات النسبية لوظيفة مختلفة في تطبيقي
App.js

import React from 'react';
import Img from './images/test.jpg';

function App() {
   return(
      <div className="App">
         <img src={Img} alt="test" /> //option-1 (this works)
         <img src='./images/test.jpg' alt="test-2" /> //option-2 (this does not work)
      </div>
    );
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
     path: path.join(__dirname,'/dist'),
     filename: 'bundle.js'
  },
  plugins: [
     new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
  module: {
     rules: [
          {
             test: /\.js$/,
             exclude: /node_modules/,
             use: {
                  loader: 'babel-loader',
                  options: {
                     presets: ['@babel/preset-env','@babel/preset-react']
                  }
             }
         },
         {
            test: /\.css$/,
            use: ['style-loader','css-loader']
         },
         {
            test: /\.jpg$/,
            type: 'asset/resource'
         }
    ]
  }
}

هيكلية الملفات

-node_modules
-src
  -components
  -css
  -images
     -test.jpg
  -App.js
  -index.html
  -index.js
-package.json
-webpack.config.js

لقد حاولت تغيير قاعدة الصورة في webpack.config.js كالتالي

{
    test: /\.js$/,
    use: ['file-loader','url-loader']
}

أرجو منكم المساعدة
 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

عندما تستورد الصورة باستخدام import كما فعلت في Img ، فإن Webpack يأخذ الملف المحدد ويقوم بتضمينه في ملف الإخراج (bundle.js) كما هو مفصل في الخيار type: 'asset/resource' الموجود في ملف webpack.config.js الخاص بك.

عند استخدام مسار نسبي للصورة كما هو موضح في option-2 ، فإن Webpack لا يستطيع العثور على الملف لأنه يحاول البحث عنه في مجلد الإخراج (dist) وليس في مجلد الصور الخاص بالتطبيق (images).

لتجنب هذا الخطأ، يمكنك استخدام مسارات نسبية مع webpack باستخدام publicPath في output، والذي يتم تعيينه إلى './' لجعل الملفات الموجودة في مجلد الصور الخاص بك متاحة للتطبيق. يمكنك أيضًا إضافة publicPath في file-loader كما يلي:

{
   test: /\.(png|svg|jpg|jpeg|gif)$/i,
   type: 'asset/resource',
   generator: {
      filename: 'static/images/[hash][ext][query]'
   },
   publicPath: './'
},

عند الانتهاء من ذلك ، يجب أن يعمل الأمر عند استخدام المسار النسبي:

<img src='./images/test.jpg' alt="test-2" />

وتأكد من تأكيد وجود مجلد static/images في مجلد الإخراج (dist).

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...