Laravel ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਲਈ Vue.js ਵਿੱਚ ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ

Laravel ਨਾਲ Vue.js ਵਿੱਚ ਚਿੱਤਰ ਡਿਸਪਲੇ ਨੂੰ ਸਮਝਣਾ

Vue.js ਵਿੱਚ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਪ੍ਰੋਗਰਾਮਰ ਵਜੋਂ, ਚਿੱਤਰਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਨੂੰ ਚੁਣੌਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ। ਇੱਕ ਆਮ ਮੁੱਦਾ ਇਹ ਹੈ ਕਿ ਚਿੱਤਰ ਦੀ ਬਜਾਏ, ਸਿਰਫ Alt ਟੈਕਸਟ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ, ਜੋ ਨਿਰਾਸ਼ਾਜਨਕ ਹੋ ਸਕਦਾ ਹੈ.

ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਖੋਜ ਕਰਾਂਗੇ ਕਿ ਕਿਵੇਂ ਇੱਕ Vue.js ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਦੇਖਣਾ ਹੈ ਜੋ Laravel ਨੂੰ ਬੈਕਐਂਡ ਵਜੋਂ ਵਰਤਦਾ ਹੈ। ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਕੇ, ਤੁਸੀਂ ਜਨਤਕ ਫੋਲਡਰ ਵਿੱਚ ਸਟੋਰ ਕੀਤੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਸੰਮਿਲਿਤ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੇ ਯੋਗ ਹੋਵੋਗੇ।

Vue.js ਅਤੇ Laravel ਏਕੀਕਰਣ ਦੀ ਵਿਸਤ੍ਰਿਤ ਵਿਆਖਿਆ

ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ Vue.js ਕੰਪੋਨੈਂਟ ਵਿੱਚ, ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ props ਪੇਰੈਂਟ ਕੰਪੋਨੈਂਟ ਤੋਂ ਡਾਟਾ ਸਵੀਕਾਰ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ। ਇਹ ਕੰਪੋਨੈਂਟ ਨੂੰ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਅਤੇ ਗਤੀਸ਼ੀਲ ਬਣਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਦ methods ਸੈਕਸ਼ਨ ਉਹਨਾਂ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਜੋ ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ, ਸਮੇਤ getImageUrl ਢੰਗ. ਇਹ ਵਿਧੀ ਇੱਕ ਫੋਟੋ ਪੈਰਾਮੀਟਰ ਲੈਂਦੀ ਹੈ ਅਤੇ ਉਚਿਤ ਚਿੱਤਰ URL ਵਾਪਸ ਕਰਦੀ ਹੈ। ਜੇਕਰ ਕੋਈ ਫੋਟੋ ਪ੍ਰਦਾਨ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਹ ਚਿੱਤਰ ਮਾਰਗ ਨੂੰ ਜੋੜ ਕੇ URL ਦਾ ਨਿਰਮਾਣ ਕਰਦਾ ਹੈ; ਨਹੀਂ ਤਾਂ, ਇਹ ਪਲੇਸਹੋਲਡਰ ਚਿੱਤਰ ਲਈ ਡਿਫੌਲਟ ਹੁੰਦਾ ਹੈ। ਇਹ ਪਹੁੰਚ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਕੰਪੋਨੈਂਟ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾ ਕੇ, ਗੁੰਮ ਹੋਈਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਸ਼ਾਨਦਾਰ ਢੰਗ ਨਾਲ ਸੰਭਾਲ ਸਕਦਾ ਹੈ।

ਲਾਰਵੇਲ ਬੈਕਐਂਡ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਰੂਟ ਪਰਿਭਾਸ਼ਾਵਾਂ ਅਤੇ ਇੱਕ ਕੰਟਰੋਲਰ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ। ਦ Route::get ਢੰਗ URL ਨੂੰ ਕੰਟਰੋਲਰ ਕਾਰਵਾਈਆਂ ਲਈ ਨਕਸ਼ੇ ਬਣਾਉਂਦਾ ਹੈ। ਵਿੱਚ ProductController, ਦ index ਵਿਧੀ Eloquent ORM ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਡੇਟਾਬੇਸ ਤੋਂ ਸਾਰੇ ਉਤਪਾਦਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ JSON ਜਵਾਬ ਵਜੋਂ ਵਾਪਸ ਕਰਦੀ ਹੈ response()->json(). ਦ show ਵਿਧੀ ਇਸਦੀ ID ਦੁਆਰਾ ਇੱਕ ਖਾਸ ਉਤਪਾਦ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ। ਇਹ ਵਿਧੀਆਂ ਫਰੰਟਐਂਡ ਨੂੰ ਉਤਪਾਦ ਡੇਟਾ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦੀਆਂ ਹਨ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀਆਂ ਹਨ ਕਿ ਪ੍ਰਦਰਸ਼ਿਤ ਡੇਟਾ ਹਮੇਸ਼ਾਂ ਅਪ-ਟੂ-ਡੇਟ ਹੈ।

ਡੇਟਾਬੇਸ ਮਾਈਗ੍ਰੇਸ਼ਨ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, Schema::create ਵਿਧੀ ਉਤਪਾਦ ਸਾਰਣੀ ਦੀ ਬਣਤਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ, ਜਿਸ ਵਿੱਚ ਉਤਪਾਦ ਦੇ ਨਾਮ ਅਤੇ ਫੋਟੋ ਲਈ ਕਾਲਮ ਸ਼ਾਮਲ ਹਨ। ਦ protected $fillable ਉਤਪਾਦ ਮਾਡਲ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ ਦੱਸਦੀ ਹੈ ਕਿ ਕਿਹੜੇ ਖੇਤਰਾਂ ਨੂੰ ਪੁੰਜ-ਸਾਈਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪੁੰਜ ਅਸਾਈਨਮੈਂਟ ਕਮਜ਼ੋਰੀਆਂ ਨੂੰ ਰੋਕ ਕੇ ਸੁਰੱਖਿਆ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ। ਇਹਨਾਂ ਭਾਗਾਂ ਨੂੰ ਸਥਾਪਤ ਕਰਕੇ, ਅਸੀਂ Vue.js ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਕੁਸ਼ਲ ਅਤੇ ਸੁਰੱਖਿਅਤ ਚਿੱਤਰ ਡਿਸਪਲੇ ਨੂੰ ਸਮਰੱਥ ਕਰਦੇ ਹੋਏ, ਬੈਕਐਂਡ ਤੋਂ ਫਰੰਟਐਂਡ ਤੱਕ ਡੇਟਾ ਦੇ ਇੱਕ ਨਿਰਵਿਘਨ ਪ੍ਰਵਾਹ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਾਂ।

ਇਹ ਏਕੀਕਰਣ Vue.js ਨੂੰ Laravel ਜਨਤਕ ਫੋਲਡਰ ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। Vue.js ਕੰਪੋਨੈਂਟ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਉਤਪਾਦ ਡੇਟਾ ਦੇ ਅਧਾਰ 'ਤੇ ਚਿੱਤਰ URL ਤਿਆਰ ਕਰਦਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਸਹੀ ਚਿੱਤਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਜਾਂ ਕੋਈ ਵੀ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਤਾਂ ਇੱਕ ਡਿਫੌਲਟ ਚਿੱਤਰ ਦਿਖਾਇਆ ਗਿਆ ਹੈ। ਲਾਰਵੇਲ ਬੈਕਐਂਡ ਤਰਕ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ, ਡੇਟਾਬੇਸ ਤੋਂ ਉਤਪਾਦ ਡੇਟਾ ਨੂੰ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਅਤੇ JSON ਜਵਾਬਾਂ ਦੁਆਰਾ ਇਸ ਨੂੰ ਫਰੰਟਐਂਡ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇੱਕ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਮਜ਼ਬੂਤ ​​ਹੱਲ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਵਿਚਕਾਰ ਚਿੰਤਾਵਾਂ ਦਾ ਇਹ ਵੱਖਰਾ ਵਿਕਾਸ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ।

// Vue.js Component
<template>
  <div>
    <table>
      <tr>
        <td><img :src="getImageUrl(product.photo)" alt="Product Image" width="100"></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: ['product'],
  methods: {
    getImageUrl(photo) {
      return photo ? \`/images/\${photo}\` : '/images/default.jpg';
    }
  }
};
</script>

<style scoped>
/* Add any relevant styles here */
</style>

// web.php (routes file)
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

Route::get('/products', [ProductController::class, 'index']);
Route::get('/products/{id}', [ProductController::class, 'show']);

// ProductController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;

class ProductController extends Controller
{
    public function index()
    {
        $products = Product::all();
        return response()->json($products);
    }

    public function show($id)
    {
        $product = Product::find($id);
        return response()->json($product);
    }
}

// create_products_table.php (migration file)
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('photo');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('products');
    }
}

// Product.php (Model)
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;

    protected $fillable = [
        'name',
        'photo',
    ];
}

Laravel ਦੇ ਨਾਲ Vue.js ਵਿੱਚ ਚਿੱਤਰ ਪ੍ਰਬੰਧਨ ਨੂੰ ਵਧਾਉਣਾ

ਚਿੱਤਰ ਨੂੰ ਸੰਭਾਲਣ ਲਈ Vue.js ਨੂੰ Laravel ਦੇ ਨਾਲ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੈ ਕਿ ਚਿੱਤਰ ਮਾਰਗ ਅਤੇ URL ਵੱਖ-ਵੱਖ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਬੰਧਿਤ ਕੀਤੇ ਗਏ ਹਨ। ਜਦੋਂ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਵਿਕਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਚਿੱਤਰ ਮਾਰਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ, ਪਰ ਸਰਵਰ ਸੰਰਚਨਾਵਾਂ ਅਤੇ ਅਧਾਰ URL ਵਿੱਚ ਅੰਤਰ ਦੇ ਕਾਰਨ ਉਤਪਾਦਨ ਲਈ ਤੈਨਾਤ ਕਰਦੇ ਸਮੇਂ ਸਮੱਸਿਆਵਾਂ ਪੈਦਾ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਅਤੇ ਲਾਰਵੇਲ ਦੀ ਸੰਰਚਨਾ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਤੁਸੀਂ ਆਪਣੇ ਚਿੱਤਰਾਂ ਲਈ ਅਧਾਰ URL ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਉਹਨਾਂ ਦਾ ਵਾਤਾਵਰਣ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ ਸਹੀ ਢੰਗ ਨਾਲ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ ਹੈ।

Vue.js ਵਿੱਚ, ਤੁਸੀਂ Laravel ਬੈਕਐਂਡ ਤੋਂ ਚਿੱਤਰ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ HTTP ਬੇਨਤੀਆਂ ਕਰਨ ਲਈ axio ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਜੇਕਰ ਤੁਹਾਡੀਆਂ ਤਸਵੀਰਾਂ ਰਿਮੋਟ ਸਰਵਰ 'ਤੇ ਸਟੋਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜਾਂ ਜੇਕਰ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਚਿੱਤਰ ਦਾ ਆਕਾਰ ਬਦਲਣ ਜਾਂ ਅਨੁਕੂਲਨ ਵਰਗੇ ਕਾਰਜ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। Axios ਦੀਆਂ ਸ਼ਕਤੀਸ਼ਾਲੀ HTTP ਕਲਾਇੰਟ ਸਮਰੱਥਾਵਾਂ ਦੇ ਨਾਲ Vue.js ਦੀ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲਤਾ ਨੂੰ ਜੋੜ ਕੇ, ਤੁਸੀਂ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਸਹਿਜ ਅਤੇ ਕੁਸ਼ਲ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਦਾ ਅਨੁਭਵ ਬਣਾ ਸਕਦੇ ਹੋ, ਭਾਵੇਂ ਵੱਡੀਆਂ ਜਾਂ ਬਹੁਤ ਸਾਰੀਆਂ ਤਸਵੀਰਾਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹੋਏ।

Vue.js ਅਤੇ Laravel ਚਿੱਤਰ ਹੈਂਡਲਿੰਗ 'ਤੇ ਅੰਤਿਮ ਵਿਚਾਰ

ਚਿੱਤਰਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ Vue.js ਨੂੰ Laravel ਨਾਲ ਜੋੜਨਾ ਸਹੀ ਸੈੱਟਅੱਪ ਨਾਲ ਸਿੱਧਾ ਹੋ ਸਕਦਾ ਹੈ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ ਕਿ ਚਿੱਤਰ ਮਾਰਗਾਂ ਦਾ ਸਹੀ ਢੰਗ ਨਾਲ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ ਹੈ ਅਤੇ ਸੰਭਾਵੀ ਗਲਤੀਆਂ ਨੂੰ ਸੁੰਦਰਤਾ ਨਾਲ ਸੰਭਾਲਣਾ ਇਸ ਪ੍ਰਕਿਰਿਆ ਦੇ ਮੁੱਖ ਕਦਮ ਹਨ। ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਅਤੇ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੀ ਪਾਲਣਾ ਕਰਕੇ, ਡਿਵੈਲਪਰ ਚਿੱਤਰਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਪ੍ਰਬੰਧਿਤ ਅਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹਨ, ਉਹਨਾਂ ਦੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਸਮੁੱਚੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾ ਸਕਦੇ ਹਨ।