react-uncached-image
Version:
React image component that bypasses caching using query param cache busting.
44 lines (43 loc) • 2.66 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CachedVsUncachedImages = void 0;
const react_1 = __importDefault(require("react"));
const UncachedImage_1 = require("../components/UncachedImage");
// === Setup ===
const StoryComponent = UncachedImage_1.UncachedImage; // <-- Set to your component
const meta = {
title: 'Stories/UncachedImage', // <-- Set to your story title
component: StoryComponent,
parameters: {
options: { showPanel: false }, // Don't show addons panel
},
};
exports.default = meta;
// === Stories ===
exports.CachedVsUncachedImages = {
name: 'Cached VS Uncached',
render: () => (react_1.default.createElement("div", null,
react_1.default.createElement("p", null,
"Image source: ",
react_1.default.createElement("code", null, "https://loremflickr.com/320/240")),
react_1.default.createElement("p", null, "Cached image:"),
react_1.default.createElement("img", { src: "https://loremflickr.com/320/240", alt: "placeholder" }),
react_1.default.createElement("img", { src: "https://loremflickr.com/320/240", alt: "placeholder" }),
react_1.default.createElement("img", { src: "https://loremflickr.com/320/240", alt: "placeholder" }),
react_1.default.createElement("div", null, "These three images share the same source. They've been cached by your browser and likely repeat three times."),
react_1.default.createElement("div", null,
react_1.default.createElement("code", null, `<img src="https://loremflickr.com/320/240" alt="placeholder" />`)),
react_1.default.createElement("p", null, "Uncached image:"),
react_1.default.createElement(UncachedImage_1.UncachedImage, { src: "https://loremflickr.com/320/240", alt: "placeholder" }),
react_1.default.createElement(UncachedImage_1.UncachedImage, { src: "https://loremflickr.com/320/240", alt: "placeholder" }),
react_1.default.createElement(UncachedImage_1.UncachedImage, { src: "https://loremflickr.com/320/240", alt: "placeholder" }),
react_1.default.createElement("div", null,
"These use ",
react_1.default.createElement("code", null, `<UncachedImage/>`),
", which uses client-side cache busting. They are likely all different."),
react_1.default.createElement("div", null,
react_1.default.createElement("code", null, `<UncachedImage src="https://loremflickr.com/320/240" alt="placeholder" />`)))),
};