Next.js: Umgang mit Bildern

Hi!

Aus den Dokumenten Static file serving. ./static/ is mapped to /static/

Sie können also ein normales img Tag verwenden
Erstellen Sie einen Ordner namens static und platzieren Sie Ihr Bild darin.

Bei Fragen gerne wieder öffnen

@impronunciable Ich denke, es ist keine so gute Idee, alle Bilder im selben globalen Ordner static zu speichern. Wie werden Sie in 2 Monaten wissen, welche Bilder verwendet werden und welche nicht mehr? Bilder könnten im selben Ordner wie eine Komponente gespeichert werden, die sie verwendet, und sie könnten von next.js selbst mit einer Abstraktionsebene nach /static verschoben werden, sodass ich einfach Folgendes tun könnte:

import myImg from './myImg.png';

und später

<img src={myImg} />

Das wäre gute Entwicklererfahrung.

@pietrasiak Nun, wenn Sie über gute Ideen zum Speichern von Bildern sprechen möchten, sollten Sie sie für die Produktion auf einem CDN speichern. Ein statischer Ordner ist der Standard für die Entwicklung, ich würde nicht sagen, dass es eine terrible Idee ist. Obwohl Sie Webpack-Loader verwenden können, um das zu erreichen, was Sie vorschlagen

Es ist eine völlig schreckliche Idee, alle statischen Dateien in einem einzigen Ordner abzulegen, der von der Komponente getrennt ist. Es ist schwierig, sich alle Dateien zu merken und auch Dateien im statischen Ordner so umzubenennen, dass sie der Struktur der Komponente entsprechen. Ich stimme den Vorschlägen von @pie6k zu , weiß aber nicht, ob es schwierig ist, sie umzusetzen oder nicht. Bei einer solchen Lösung könnten wir auch von Optimierungen der Lader, wie z. B. svg-loader, profitieren.
Ich würde diese Funktion gerne implementieren, bin aber neu bei next.js.

@impronunciable Ich glaube, sie auf einem statischen Server mit guter

Wenn sie auf irgendeine Weise verarbeitet werden würden (von next.js in einen statischen Ordner verschoben, umbenannt usw.), bevor ihre endgültige 'URL' zurückgegeben wird, wäre es meiner Meinung nach relativ einfach, dort eine Funktion anzuhängen, die das Verschieben dieser Dateien verwalten würde zu CDN, also würden Sie es weiterhin verwenden.

import myImg from './myImg.png';
// and then
console.log(myImg); // 'http://your.cdn/myImg.png'

Dies würde eine ganz neue Klasse effektiver Workflow-Anpassungen von next.js ermöglichen.

Ok, ich habe dieses Plugin hinzugefügt: babel-plugin-import-static-files
Es funktioniert soweit, wenn Sie irgendwelche Probleme haben, lassen Sie es mich wissen.
Es kopiert einfach importierte Bilder in den Ordner /static und wandelt den Bildpfad in den Punkt /static/path/to/img.png . Dieses Plugin ist abgespalten von babel-plugin-transform-assets-import-to-string

@ahalimkara sollte das in NextJS sofort funktionieren?
Ich erhalte im nächsten 4.1.0 Meldung "Sie benötigen möglicherweise einen geeigneten Loader, um diesen Dateityp zu verarbeiten".

@anselmdk nach Codebeispiel import myImg from './myImg.png' Ich meinte ein Beispiel dafür, wie es funktionieren könnte, nicht wie es tatsächlich funktioniert.

Ok, verstanden, also brauchen wir einen benutzerdefinierten Loader, damit dies funktioniert.

@anselmdk ja, es sollte funktionieren, wenn Sie irgendwelche Probleme haben, lassen Sie es mich wissen.

@ahalimkara Scheint, als ob babel-plugin-import-static-files den Pfad für Windows nicht richtig komponiert.

Der Fehler:

E:\Dropbox\Programming\client\src\static\E:\Dropbox\Programming\client\src\app\routes\Landing contains invalid WIN32 path characters.

@amosyuen Verwenden Sie Standardoptionen oder Ihre benutzerdefinierten Optionen? Landing Datei hat keine Erweiterung?

(Ich habe die Registerkarte " Probleme" aktiviert, damit Sie Ihre Anfragen dort einreichen können.)

Weitere Details in einer neuen Ausgabe veröffentlicht, die ich erstellt habe https://github.com/ahalimkara/babel-plugin-import-static-files/issues/1

@ahalimkara da stimmt was nicht. Ich habe dir ein Problem gepostet. hilfst du mir ahalimkara/babel-plugin-import-static-files#2

@luanwulin ja Probleme Seite, ich bin Überprüfung alles da. Dankeschön.

@ahalimkara Ich habe ein Problem auf Ihrer Problemseite Probleme #2

Kann jemand wieder öffnen, bis es offiziellen Support für die https://github.com/zeit/next.js/issues/79#issuecomment -300138252 Empfehlung gibt (oder eine offizielle Haltung dazu, warum Sie das nicht umsetzen werden, oder offizielle Empfehlung?) für eine Problemumgehung)?

Scheint nur der Großteil der Community zuzustimmen https://github.com/zeit/next.js/issues/79#issuecomment -300138252

Scheint, als könnte https://github.com/zeit/styled-jsx/pull/148 dies beheben.

Ungetestet, Pseudobeispiel:

// components/Header/HeaderStyle.js
export default `
h3 { color: red; }
`

// components/Header/HeaderComponent.js
import style from './HeaderStyle'

export default () =>
  <div>
    <h3>Yo</h3>
    <styled jsx>{style}</styled>
  </div>

Für diejenigen, die sich für das Setup der Komponentenarchitektur von Nicolas Gallagher interessieren, können Sie HeaderComponent.js in HeaderScript.js und HeaderTemplate.js aufteilen. ️

Sie können jetzt require oder import Bilder in Next:

Sie können tatsächlich Webpack-Loader in v5 verwenden, jemand hat bereits ein Plugin für den Umgang mit Bildern erstellt: https://github.com/arefaslani/next-images

ref: https://github.com/zeit/next.js/issues/1935#issuecomment -367039454

...oder ändern Sie einfach Ihre Webpack-Konfiguration gemäß den Einstellungen in https://github.com/arefaslani/next-images/blob/master/index.js zB

publicPath: '/_next/static/images/',
outputPath: 'static/images/' 

Wie Sie hier sehen können: https://github.com/arefaslani/next-images/blob/master/index.js

next-images konfiguriert nur Webpack

Ich möchte Sass und Images in meiner Entwicklung verwenden, aber es gibt ein Problem beim Konfigurieren dieser Module.

@zeit/next-sass und next-images Konfigurationsproblem in next.config.js

``
const withSass = require('@zeit/next-sass')
const withImages = require('next-images')

module.exports = withSass();
module.exports = withImages();
``

Wie man es löst?

Ich möchte Sass und Images in meiner Entwicklung verwenden, aber es gibt ein Problem beim Konfigurieren dieser Module.

@zeit/next-sass und next-images Konfigurationsproblem in next.config.js

``
const withSass = require('@zeit/next-sass')
const withImages = require('next-images')

module.exports = withSass();
module.exports = withImages();
``

Wie man es löst?

hallo habe das gerade gesehen. aber ich habe immer noch Probleme, die URL der Bilder umzuleiten
const withSass = require('@zeit/next-sass');
const withImages = require('nächste-Bilder');

module.exports = withImages(withSass({
Webpack: Funktion (config) {
// benutzerdefinierte Konfigurationen
Konfiguration zurückgeben
}
}));

Danke KeiKal

@impronunciable Um genau zu sein, sollten alle Dateien auf cdn gespeichert werden - gebündeltes js und css. Ich meine, über Best Practices zu sprechen. /zucken